In this video, Ray Villalobos uses inline elements to create input groups. These allow you to put form elements in a horizontal layout, which makes the form look like single units and works great in places like navigation.
- [Instructor] We've already looked at how to turn…form groups into in line elements, now there is a…variation of this called input groups, that allows…you to turn form elements with input fields and…labels in a horizontal layout with an integrated look,…so let's check it out.…Alright, to work with this, you add a class of input…group add on, to an additional piece of text,…and this will make that element appear like it belongs…side by side with the input field.…You'll see it just a second.…We can add one or more to each side of the input field,…and we can even add other elements like check boxes,…or also buttons, right next to the input field,…so let's see how this works.…
Here we have a pretty simple form, it's got a few fields…and I want to change this amount field so that it has…a couple of input group add ons, and I'm also going to add…a search box right here on this navigation.…Now, just so you know, this navigation actually has…a branding element that doesn't show up unless it's…a little bit wider, so I don't want that to freak you out…
- 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.