Bootstrap Panels Tutorials and Examples

Bootstrap Panel is a bordered rounded box with some padding. Panel created with class .panel and content add with class .panel-body.

We can create header and footer also in panel by using class .panel-heading and .panel-footer , There are also we can add Panel with panel-default class , Panel with panel-success class , Panel with panel-info class, lets practice Bootstrap Panels.

<div class="panel panel-default">
  <div class="panel-body">(SCHAUHAN.IN) Bootstrap Basic Panel</div>
</div>

Bootstrap Panel Heading and Footer

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

Bootstrap Panel Group

Bootstrap Panel Group is a collection of panels we can add multiple panels in panel group. The .panel-group class clears the bottom-gap from each panel:

<div class="container">
  <div class="panel-group bs">
 
    <div class="panel panel-default">
      <div class="panel-heading">Panel Header</div>
      <div class="panel-body">(SCHAUHAN.IN) Bootstrap Basic Panel</div>
    </div>
    
    <div class="panel panel-default">
      <div class="panel-heading">Panel Header</div>
      <div class="panel-body">(SCHAUHAN.IN) Bootstrap Basic Panel</div>
    </div>
     
</div>
 </div>

Panels Contextual Classes

For create different colors of panel we use contextual classes like Primary, Info, Default, Warning, Danger etc.

<div class="container">
    <div class="panel-group">
    <div class="panel panel-default bs">
      <div class="panel-heading">(SCHAUHAN.IN) Panel with panel-default class</div>
      <div class="panel-body">(SCHAUHAN.IN) Bootstrap Basic Panel</div>
    </div>

    <div class="panel panel-primary bs">
      <div class="panel-heading">(SCHAUHAN.IN) Panel with panel-primary class</div>
      <div class="panel-body">(SCHAUHAN.IN) Bootstrap Basic Panel</div>
    </div>

    <div class="panel panel-success bs">
      <div class="panel-heading">(SCHAUHAN.IN) Panel with panel-success class</div>
      <div class="panel-body">(SCHAUHAN.IN) Bootstrap Basic Panel</div>
    </div>

    <div class="panel panel-info bs">
      <div class="panel-heading">(SCHAUHAN.IN) Panel with panel-info class</div>
      <div class="panel-body">(SCHAUHAN.IN) Bootstrap Basic Panel</div>
    </div>

    <div class="panel panel-warning bs">
      <div class="panel-heading">(SCHAUHAN.IN) Panel with panel-warning class</div>
      <div class="panel-body">(SCHAUHAN.IN) Bootstrap Basic Panel</div>
    </div>

    <div class="panel panel-danger bs">
      <div class="panel-heading">(SCHAUHAN.IN) Panel with panel-danger class</div>
      <div class="panel-body">(SCHAUHAN.IN) Bootstrap Basic Panel</div>
    </div>
  </div>
 </div>