In this video, Ray Villalobos uses column classes to control how form elements can me modified for a two-column layout structure within your pages, which is an excellent way to handle responsive form design.
- [Narrator] Bootstrap helps you lay out forms using the column grid. There's a few classes you should know about, so let's take a look. First off, every form element that is going to be controlled by the grid needs a container. It doesn't need to be in the form element or even in any of the form groups. You can actually just use it outside the form, and that will work just fine. You can use either rows or columns just like you would with any other layout, but you can also use them inside the groups themselves.
There's a special class called col-form-label to give labels a better spacing inside form elements that are inside columns. So let's take a look at how these work. Here I have a pretty simple form, and I want to set up a column where city and zip, when this form is bigger, sort of are on the same line, and I want to set a two column layout for the entire form. So whenever I have a little bit more room, these labels can be on a separate line, and then all the form elements will start a little bit further in a different column.
So let's see how we can do that. We'll start off with the city and zip group. So those are right here, and the city is on a form group by itself, and so is also the zip. And then I've also taken a form group and wrapped it around both of them. You can do that whenever you want with as many elements as possible. The reason for this is I'm going to create a row and then each one of these elements will behave like a column.
Now notice that I do have the sr-only class here, so if I take this out you'll see that I actually have labels for city and zip, but I don't want them to display when they're side by side, otherwise they'll take up too much room. So I can hide them by using the sr-only class, which means that these will be available to screen readers only, and not show in the regular design. So let's go ahead and save that, and you can see that the city and zip (mumbles) away. It's important to have labels in all of your form elements, even if you don't want them to display and this is an easy way to hide them.
Alright so to make this work, what I'm going to do is add a row class right here to set up the row. And then once I do that, I can add individual columns to each of the elements. So for this one, I'm going to add a col-6. And on this other one I will add a col-4. So that pretty easily sets the form up to be side by side. You can play around with these numbers if you want to, so if you just wanted to make them both the same size you could use col-6 just like you would with any column layout.
Now do bare in mind that because I'm not using the breakpoint keywords here, these aren't really responsive so no matter what size I make these, they're always going to take up two columns. I think it's fine for these input fields. However if you had three elements, you probably wouldn't want them to always do this. Let's go ahead and leave them at 6 and 4. I think city should be a little bit bigger. And we are going to be pushing these columns by a certain amount in a minute whenever we make it to column layout. So I want to have a little sort of Shem of two columns for my bigger labels right here.
Right, so let's start setting up the other columns. As I already mentioned, we have a container that is outside the form element. That'll work just fine, it doesn't need to be in here. It just needs to be somewhere. I'm going to set up a row right here in this form group to show you how you can turn these two things into a two-column layout. And then in each of these columns, I'm going to create one for this label here, and I'll do it at the medium breakpoint and I'll have it take up two of the units.
And I also need to use that extra class, which is col-form-label here. And then I'm going to take this input group and actually wrap it inside a div. So I'll create a class here of col-md-10. This one's taken up two of the units, and this one will take up 10 of the units. So that's 12, let's go ahead and save that. And at the medium breakpoint, which may be a little bit bigger than this, you'll see that they'll split to side-by-side states, which I think is more readable whenever you have elements that are pretty long.
And then when you get to a smaller breakpoint they'll stack up, which is actually fantastic because as you know, when you're on a mobile device and you tap on an input field, sometimes it tends to zoom into that input field. And if you have the labels to the side, sometimes you can't see them. So it's always good in mobile devices to have them stacked up. Now I don't like that the text is sort of left align here, so I could easily fix that using one of the text align classes.
And so we're going to use, for this label, text. Also the medium breakpoint and then add the word right. So at the medium breakpoint, this is going to be aligned to the right and it'll fit nicely with the columns. And then when it gets to the smaller breakpoint, it's going to stack up properly. Let's do the same thing to this address and see how we have to adjust here. So once again we'll create a row right here. And then we need to add some classes to this input field.
So we have form-control-label, and then we'll do col-md-2 text-md-right, and we need to add the col-form-label here as well. And then this input field is going to be inside a div. And then on this div, we will add the class for the other columns. So col-md-10. Ans we'll make this a little bigger, and you should see this one sort of push over.
Now as I mentioned, these aren't going to be pushed over and neither is the submit button, so we can use offsets to take care of that. Let's go ahead and do that. We will add just an offset to this field right here. So col-6, and then we will do an offset at the medium breakpoint of 2. So 2, plus 6 and 4 is 12. Let's go ahead and save that. And you can see that they shift over by that amount. And yet, when we go to a smaller breakpoint, everything is stacked up nicely and it still recognizes the two columns right here.
We could add, here, add the medium breakpoint before and then just have it be normally six units, or play around with how those work as well. So now it's going to take up six of the units. When I go wide it's going to go back to the other layout. So now we just need to shift the submit button. Notice that it sort of looks weird being over here on the left when the form is wider. So all we have to do is add another class. It's going to be a little bit more complicated because it means that we're going to have to create a group for the button as well.
So we'll do a div with a class of form-group. And we'll have to put the row right there. And then we'll have to add a div with a class of offset-md-2 and col-md-10, and we'll need to close out this div as well. We probably need to add a comment right here for this form group.
And I'll even do one for this offset. So now this shifts over, and when we make it smaller, it goes back and to the left. So, that works fantastically. Making forms that are responsive in Bootstrap isn't exactly simple. You do have to add a lot of markups. But making your forms work like this will make them easier to fill out, and they will look beautiful.
- 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