Bootstrap Panels

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

Bootstrap 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:


  A Basic Panel

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

Bootstrap 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 Heading
  Panel Content

Bootstrap 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 Content
  Panel Footer

Bootstrap 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:


  
    Panel Content
  
  
    Panel Content

Bootstrap 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:


      Panel with panel-default class
      Panel Content
    

    
      Panel with panel-primary class
      Panel Content
    

    
      Panel with panel-success class
      Panel Content
    

    
      Panel with panel-info class
      Panel Content
    

    
      Panel with panel-warning class
      Panel Content
    

    
      Panel with panel-danger class
      Panel Content