Bootstrap Panels
The panel is a bordered box with some padding around its element. The bootstrap panel elements are used when you want to put your DOM component in a box.
Basic Panel:
The .panel class is used within the <div> element to create Bootstrap panels. content inside the panel has a .panel-body class.
Example:
<div class="container"> <h2>Basic Panel</h2> <div class="panel panel-default"> <div class="panel-body">A Basic Panel</div> </div> </div>
OUTPUT:
panel contains three parts:
- Panel header
- Panel content
- Panel footer
Panel Heading:
.panel-heading class adds a heading to the panel.
Example:
<div class="container"> <h2>Panel Heading</h2> <div class="panel panel-default"> <div class="panel-heading">Panel Heading</div> <div class="panel-body">Panel Content</div> </div> </div>
OUTPUT:
Panel Footer:
.panel-footer class adds a footer to the panel.
Example:
<div class="container"> <h2>Panel Footer</h2> <div class="panel panel-default"> <div class="panel-heading">Panel Heading</div> <div class="panel-body">Panel Content</div> <div class="panel-footer">Panel Footer</div> </div> </div>
OUTPUT:
Bootstrap Panel Group:
For a panel group, wrap a <div> with class .panel-group around them. The .panel-group class clears the bottom-margin of each bootstrap panel.
Example:
<div class="container"> <h2>Panel Group</h2> <div class="panel-group"> <div class="panel panel-default"> <div class="panel-heading">Panel Header</div> <div class="panel-body">Panel Content</div> </div> <div class="panel panel-default"> <div class="panel-heading">Panel Header</div> <div class="panel-body">Panel Content</div> </div> <div class="panel panel-default"> <div class="panel-heading">Panel Header</div> <div class="panel-body">Panel Content</div> </div> </div> </div>
OUTPUT:
Panels with Contextual Classes:
Use contextual classes (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, or .panel-danger) are used to color the panels.
Example:
<div class="container"> <h2>Panels with Contextual Classes</h2> <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-info"> <div class="panel-heading">Panel with panel-info 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> </div> </div>
OUTPUT: