Home » bootstrap » Bootstrap Panels

Bootstrap Panels

more stuff on Bootstrap Panels like creating them and controlling their different aspects.

Basic Panels

Defining by the looks of it, a panel is just a bordered box that wraps around its content with some visible padding.

A basic panel can be created using following steps:

  • Firstly, like any other Bootstrap element that wraps around its content or holds some other elements in them, you need to create a <div>. In, fact here you need to two <div> elements. The inner <div> will hold the panel content
  • The two contextual classes that you need for creating a basic panel are:
    • .panel
    • .panel-body
  • The .panel class is will be used with the outer <div> while the .panel-body class will be used with the inner panel.

The code snippet below will give you a better understanding of what is discussed above:

You can also use the .panel-default class for styling the color of the panel above.

Panel Heading

The panel can have a header of its own. This can be used when you want to give a title to your panel content.

To create a panel heading, you can use the .panel-heading class. See the code below for example:

Panel Footer

Just like a panel header, you can also add a footer to your panel.

This is very useful when you want to ad a side note or a button related to some action for your panel content.

To add the footer to your panel, you just need to use the .panel-footer class with your <div>. See the code below for illustration:

Panel Group

Sometimes, there might be more than one side notes in your tutorial. In such cases, you can group multiple panels together.

In Bootstrap, the grouping of panels can be done you can wrap them inside a <div> with .panel-group class.

When used in such <div>, the panels loose their bottom margin. Check out the code below for a practical understanding:

Panels with Contextual Classes

Bootstrap provides a list of contextual classes to control the background colors of the panels. Below is the list of all these classes:

  • .panel-default
  • .panel-primary
  • .panel-success
  • .panel-info
  • .panel-warning
  • .panel-danger

See the code below to understand the use of all these classes:

Managed by MochaHost - Fast & Easy WordPress Hosting