Use of panels in bootstrap

Fundamentals Board:

<div class= "Panel Panel-default" >

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

</div>

Panel title without title:

<div class= "Panel Panel-default" >

<div class= "panel-heading" > Don't title Panel header </div>

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

</div>

Panel with caption: Modified by

<div class= "Panel Panel-default" >

<div class= "panel-heading" >

<div class= "Panel panel-body" > Panel content with title </div>

</div>

Panel with contextual color:

<div class= "Panel panel-primary/panel-info/panel-success/panel-warning/panel-danger ">

<div class= "panel-heading" > Panel title </div>

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

</div>

Panel with table:

<div class= "Panel Panel-default" >

<div class= "panel-heading" > Panel title with Table </div>

<div class= "panel-body" > Panel contents with table </div>

<table class= "Table" >

<tr><th> name </th><th> Quantity </th></tr>

<tr><td> Mobile </td><td>8</td></tr>

<tr><td> Computers </td><td>4</td></tr>

</table>

</div>

Panels with list groups:

<div class= "Panel Panel-default" >

<div class= "panel-heading" > Title with List group </div>

<div class= "Panel-body" > Content with List group </div>

<ul class= "List-group" >

<li class= "List-group-item" > First List Group </li>

<li class= "List-group-item" > second list group </li>

</ul>

</div>

Preview of the approximate effect:

Use of panels in bootstrap