In this video, Ray Villalobos walks through styles to help you build form elements. There are a lot of options, and the classes and structure of forms have changed significantly in this new version.
- [Instructor] Bootstrap has some fantastic classes…to help you build forms.…Let's take a look at some of the basic options…and start working on a simple form.…The basic way to group form elements is…with a form group class.…It can be used with any block element…like fieldsets and divs and adds a bit of spacing…to the bottom of the element.…It also sets the group to display block.…And it's required for proper layout of some elements.…There's another class you can use…for basic form text elements like paragraphs…and text that belongs underneath input fields.…
Now for basic text input fields,…you want to use the form control class.…It's meant for inputs, select and text areas.…There is a form control label that you should use…on labels belonging to form controls.…And finally, there is an optional form control file,…specifically for file inputs…if you're going to be using those.…So let's take a look at a basic form…that I've prepared for you right here.…All it has is a form element…and we've got a couple of fieldsets…
- Creating a basic template
- Reviewing basic styles and typography
- Using colors with Bootstrap
- Working with classes that help you deal with images
- Working with grid containers
- Offsetting columns
- Using list groups to style lists, buttons, and links
- Using breadcrumbs
- Reviewing layout components
- Using form styles
- Working with interactive components
Skill Level Beginner
Responsive CSS with Sass and Compasswith Ray Villalobos3h 22m Intermediate
Building a Responsive Single-Page Design with Sasswith Ray Villalobos4h 55m Intermediate
1. Getting Started
2. Using Basic Styles
3. Mastering Layout with Bootstrap
4. Using Navs and Navbar Components
5. Basic Style Elements
6. Layout Components
7. Using Form Styles
8. Working with Interactive Components
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.