Bootstrap Panels

A border box with some padding around the content is called bootstrap panel. If you want to put your DOM component in a box then you should use panels. To use panel, you have to just add class .panel to the <div> tag and also use .panel-default class.

Example:

<div class="panel panel-default">
<div class="panel-body">
A basic panel example
</div>
</div>

Run Example

Panel with Heading

To use panel heading, you have to just add .panel-heading class to the <div> tag.

Example:

<div class="panel panel-default">
<div class="panel-heading">
Panel heading
</div>
<div class="panel-body">
Panel body
</div>
</div>

Run Example

Panel with Footer

To use panel footer, you have to just add .panel-footer class to the <div> tag.

Example:

<div class="panel panel-default">
<div class="panel-heading">
Panel heading
</div>
<div class="panel-body">
Panel body
</div>
<div class="panel-footer">
Panel footer
</div>
</div>

Run Example

Panels Using Contextual Classes

To use panel footer, you have to just add .panel-footer class to the <div> tag.

Example:

<div class="panel panel-primary">
<div class="panel-heading">
Panel heading
</div>
<div class="panel-body">
Panel body
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
Panel heading
</div>
<div class="panel-body">
Panel body
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
Panel heading
</div>
<div class="panel-body">
Panel body
</div>
</div>

Run Example

Recommended Posts: