7 days of unlimited WordPress themes, plugins & graphics - for free! Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 18Length: 1.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.5 Panels

Hey, welcome back. The panel is a new component in Bootstrap 3. So let me show you how to use it. You first start with a div with a class of panel and panel-default. Panel-default will give its original styling. And inside, you're gonna put a div with a class of panel-body. Inside this one, you can put anything you want. So I'm just gonna say, this is a panel. Refresh, there it is. Now, you can add headings to panels. So on top of this, I'm gonna say a div with a class of panel heading. And this is a panel heading. If you want to put more emphasis on that heading, you can wrap the content, which is this, in a heading, for example, an h4 with a class of panel-title. [BLANK_AUDIO] And now it's bolder, it's easier to see. You can also add a panel-footer. So under the panel-body, you would say div class of panel-footer, panel-footer. And there it is. Now if you remember from last lesson, I showed you some contextual classes that added different colors for warnings, success, information, danger, and so on. You can do the same with panels. So you can do that by adding the class to the main panel element. So panel-primary, for example, will blue. And then you can panel-success, which is green. We can have panel-info, warning, and danger, which is a red. So we can use them in a variety of situations. Now, panels work very well with tables, so let me give you an example. If under the panel-body, I'm gonna add a table with a class of table, and then inside, I'm just gonna do a few rows. Like this, and instead of the td here, let's do th, or table heading for proper styling, yeah? Notice, that it's now full width, so it integrates very well with with the panel. If we don't have a panel-body, then there is no distance between the table and the panel-heading. Same goes for list groups. So for example, instead of the table, and let's actually do a separate panel here, so you can see both versions. [BLANK_AUDIO] So if instead of this table, I would have a ul with a class of list-group, which contains some list items with a class of list-group-item. [BLANK_AUDIO] Times four, for example. Yeah, it integrates very well. And the same goes for the panel-body. If I, if I don't have it, there is no distance here. But if I add my panel-body with a paragraph inside it, then we have a small bottom margin from the panel-body to the element below it. And that's basically it for panels. Now a component that's used very often is a model window and adding it is really, really easy. That's coming up next.

Back to the top