Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.