Bootstrap 3 Tutorial
BS Panels
Panels
Bootstrap defines a panel as a bordered box with padding around its content.
------list mukava -----
The .panel class is used to generate panels, while the .panel-body class is used for content within the panels.
Example
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>
The .panel-default class is used to change the color of the panel. For more contextual classes, see to the last example on this page.
Panel Heading
------list mukava -----
The .panel-heading class creates a heading for the panel:
Example
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
</div>
Panel Footer
------list mukava -----
The .panel-footer class creates a footer for the panel:
Example
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
Panel Group
To group multiple panels, enclose them in a <div> with class .panel-group.
The .panel-group class removes the bottom border from each panel:
Example
<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>
Panels with Contextual Classes
Color the panel using contextual classes (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, or .panel-danger):
