Tables are just as awesome as before with a few additions and modifications. For example, the table-responsive class now goes directly in the table. There is a new inverse style that makes the table have a dark background. You can also style the table heads with a couple of additional classes. Finally, there is a table reflow class that lets you change the order of how the cells are ordered.
So there's not a lot of changes to forms. Let me go over what's changed and also show you how to update a form from Bootstrap 3. Now the critical changes here are that first of all, you don't need the class ".form-horizontal" at all, so if you have it in some forms, you can take it out. It's no longer needed. The forms are going to be automatically horizontal by doing something else. And that means that when we have a ".form-group", that is going to be controlling the rows, so we're going to need to add a ".row" class to any form groups in horizontal forms that are going to have columns inside them.
Now next, if you have any ".control-label" classes, those need to be renamed ".form-control-label". Also, if you have ".input-lg" or ".input-sm", now they are called ".form-control-lg" and ".form-control-sm". And you can see sort of a pattern here. Some of the things are going to require you to have that "form" prefix at the beginning. ".input-lg" and ".input-sm" are elements that allow you to control the size of input fields and those stay.
However, the ".form-group-lg" and ".form-group-sm" also allow you to control the size of how those input fields and other elements fit within a form; these two have been deleted, unfortunately. So this is a form that you might run into when you migrate a website. Notice that everything looks pretty good, but some of the sizes and some of the spacing between the elements need to be adjusted when you migrate a form. So, first of all, if we have a "form-horizontal" class, we're not going to need it anymore, because what's going to handle our rows is going to be these "form-groups".
You don't need to do this when you don't have a horizontal form, but anytime you have some elements that are controlled by these columns, you are now going to need to add the "row" class to the containers. And let's go ahead and grab that and just paste them right next to every one of the form groups. Now, we also have several elements that have this "control-label" class. Those are also going to have to be renamed. So I'm going to select one and add them, which I'm using.
I can add more of those by saying "Select Next". So I'm going to do that a few times and just grab all of them. These need to be renamed "form-control-label". And you need to do that anywhere in your forms. Before you were just using the "control-label" classes. What that's going to do is allow these labels to vertically display within the forms. So let's go ahead and save this. And that should be all we need to do to make this a lot better. And now you can see that the spacing looks substantially better.
And if you make this form a lot smaller, you'll notice that it also stacks just like it used to, but we have to do a little bit of wrangling to get it to do what it used to do before, by adding a few row classes here and there. And then we can get rid of the horizontal form class and a lot of other things that are going to be sort of a little bit of a pain for you to upgrade. But in the long term, I like the way that Bootstrap is thinking about prefixing things properly with consistent names.
- Installing the upgrade
- Using Reboot.css
- Using the new grid
- Working with new navigation and card components
- Understanding table and form changes