Multideveloper: Bootstrap Panels

Panels

A panel in bootstrap is a bordered box with some padding around its content:

A Basic Panel

Panels are created with the .panel class, and content inside the panel has a .panel-body class:

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

Panel Content

The .panel-heading class adds a heading to the panel:

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

Panel Content

Panel Footer

The .panel-footer class adds a footer to the panel:

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