Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Installing Bootstrap 3
- Using the new grid systems
- Working with typography
- Understanding the responsive class updates
- Using panels and list groups
- Migrating from Bootstrap 2.3 to Bootstrap 3.0
Skill Level Intermediate
The new version of Bootstrap doesn't really have a ton of new features. It's more of a realignment towards flat and mobile first design. But there's a couple of new additions to components worth lookin' at. The first is panels. Panels are sort of similar to the old wells. But don't worry; if you've used wells before, the coding for those stays exactly the same. This is just an addition. To create a panel, you simply create a div with a class of panel. And let me show you how that works. So we've got, a basic HTML page. It just calls the bootstrap.css, as well as the bootstrap.js, files, and I'm going to add myself a panel here, so I'll create a div, with a class of panel, and then I can just put some content in there. So I'm going to save this and you can see that it's coming in in here however my body tag right now doesn't have any padding because the bootstrap that CSS file is going to clear that, so I'm just going to add some in there so you can see it.
So style Is going to be padding and then 10 pixels. And now you can see the panel in all it's glory, it's really just taken some content and putting it in a rounded edge box. It sort of has a mobile device feel to it. Now you can also add headers and footers, so to do that, you create another div with a class of panel heading, and in here you can put a, some headings, I'll put in heading, save it, and there, you can see that it looks sort of like what you would see on a mobile device, and of course, the footer is going to be pretty similar, but it's going to be called panel-footer, and I'll put in just the word footer here for now.
Capitalize that, save it. You can see that it looks a little bit different. But there's really not a lot of difficult code. You can use an H1 class here, if you want to, and you can also color the different panels by adding another class here. So you can say panel - primary and that will coat the panel blue. And there's other classes you can use, as well. So you can look those up in the manual, they're right here. You have things like panel primary, panel success, panel warning, danger and info. Panels work pretty well with list groups. They're sort of meant to go together.
Well take a look at those in the next video.