Another change included in the Bootstrap 4 update is changes to tables. Some of these updates include changes to how styles are inherited and how wrapping occurs. You'll also notice some consistency improvements in how tables are names and some new table options for inverse, reflow, and headers.
- [Voiceover] So not everything is a crazy, dramatic change to the new framework. In this chapter I'm gonna show you some of the more subtle changes that have happened, and especially when you're dealing with migrating an existing site. We're gonna start with tables. They are just as awesome as before, and not a lot of changes have happened, but there are some important additions and modifications. Let's take a look. First of all, in the old version of Bootstrap, you used to have to create a wrapper in order to create a responsive table.
So you would take the table and wrap it with another tag and that tag would get the class called table-responsive. Now that is a lot easier. All you have to do is add the table-responsive class directly into the table tag, and that's a lot easier than before. Another minor change to watch out for when upgrading is that the table-condensed class is now renamed to be table-sm. That makes things a little bit more consistent with all of the naming changes.
Now there's also a new inverse style that makes a table have a dark background and light fonts. You can also style the table heads with a couple of additional classes, thead-default and thead-inverse. Now finally, there is a table-reflow class that lets you change the order of how the cells are ordered. Now this is a little funky. They flow vertically instead of horizontally, but you may find some uses for this one. So let me show you some of these changes.
We're gonna start by modifying this document right here. It has a simple table and I took this price here and just kind of duplicated it a few times. So let's take a look at the code. I'm going to start by just adding a class here of table. I'm gonna go over to the layout, and you can see that it looks really nice. One of my favorite features in Bootstrap because just by adding that single class, they look fantastic. So let's go ahead and see the responsive version of the tables.
So before what used to happen is I would have to take this table and then wrap everything around a new container. So I would usually create a div and add a class of table-responsive here. But I don't have to do that anymore. I can just take this table-responsive and that's something you'll have to do if you're migrating a site, and just add that directly into this table class right here. Let's go ahead and go back. It's not gonna look a lot different but if we were to take this very thin, you would notice that if we scroll up and down, we can see some of the cells, and we now have the ability to scroll horizontally as well.
So that's sort of a new addition, not having to add a wrapper makes a table a little bit easier to work with. So another change is that before we could use a table-condensed class and that would give us a smaller version of the tables. If you have any of those in your content, you have to change that to table-sm, and that gives you the same feeling. So if you've got a lot of tables with table-condensed, this is gonna be an easy search and replace.
So this table's a lot more concise. The spacings are little bit tighter and that's basically a table-sm now. All right, so let me try the table-inverse. So if I do that, my layout is a dark background with light fonts. I think it looks pretty nice. I'm not crazy about reverse tables like this. I think it's a little bit harder to read, but if that's your cup of tea, you can definitely go for it. You can also style table heads, so table heads are these thead elements right here.
You can add a class of thead-default, and so let's try that one. That gives you this table with a gray background. You can also do a thead-inverse and that is going to give you this dark background with a light text. Actually think that looks pretty good. Of course, you can make that whatever color you want. Finally, there is the very strange table-reflow.
Let me go ahead and just get rid of this class here just to have a standard table. I'm going to go ahead and change this to table-reflow, just add that class. Something really funky's gonna happen to the table. It's actually now displaying the cells vertically so you can see the what used to be the headline is now vertical like this, and then it grabs the next bunch of cells and puts them up vertically. I'm not sure I'm super crazy about this because so you can see once you run out of room, it kind of goes and it puts the next one over this way.
So it's not something that I am particularly crazy about, but it might be something that you find some use for. Now the few changes to the tables are small, but I think they are a big improvement. The ability to create inverse tables and control the styles and table heads is a really nice addition.
- Installing the upgrade
- Using Reboot.css
- Using the new grid
- Working with new navigation and card components
- Understanding table and form changes