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:
1 2 3 | <div class="panel panel-default"> <div class="panel-body">A Basic Panel</div> </div> |
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:
1 2 3 4 | <div class="panel panel-default"> <div class="panel-heading">Panel Heading</div> <div class="panel-body">Panel Content</div> </div> |
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:
1 2 3 4 | <div class="panel panel-default"> <div class="panel-body">Panel Content</div> <div class="panel-footer">Panel Footer</div> </div> |
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
1 2 3 4 5 6 7 8 | <div class="panel-group"> <div class="panel panel-default"> <div class="panel-body">Panel Content</div> </div> <div class="panel panel-default"> <div class="panel-body">Panel Content</div> </div> </div> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <div class="panel panel-default"> <div class="panel-heading">Panel with panel-default class</div> <div class="panel-body">Panel Content</div> </div> <div class="panel panel-primary"> <div class="panel-heading">Panel with panel-primary class</div> <div class="panel-body">Panel Content</div> </div> <div class="panel panel-success"> <div class="panel-heading">Panel with panel-success class</div> <div class="panel-body">Panel Content</div> </div> <div class="panel panel-info"> <div class="panel-heading">Panel with panel-info class</div> <div class="panel-body">Panel Content</div> </div> <div class="panel panel-warning"> <div class="panel-heading">Panel with panel-warning class</div> <div class="panel-body">Panel Content</div> </div> <div class="panel panel-danger"> <div class="panel-heading">Panel with panel-danger class</div> <div class="panel-body">Panel Content</div> </div> |