Bootstrap Panels

admin

9 years ago

Bootstrap Panels : A Panel in bootstrap is basically a box with some styles like border , padding etc. Bootstrap provides predefined boxes which are known as panel. We often need to show data in box with some padding and border for this bootstrap panel component becomes very useful. Bootstrap panel component provides many types of panel. We are going to explain panels with example and demo.

Bootstrap Panels

Here is very basic panel –

Basic Panel

<div class="panel panel-default">
  <div class="panel-body">Hi I Am Basic Panel</div>
</div>

Try it »

If you run the above example it will produce output like this –

Bootstrap Panel Heading

.panel-heading is used to add heading in panel.

Basic Panel

<div class="panel panel-default">
  <div class="panel-heading">My Heading</div>
  <div class="panel-body">Hi I Am Basic Panel With Heading.</div>
</div>

Try it »

If you run the above example it will produce output like this –

Bootstrap Panel Footer

.panel-footer is used to add footer in panel.

Basic Panel With Footer

<div class="panel panel-default">
  <div class="panel-heading">My Heading</div>
  <div class="panel-body">Hi I Am Basic Panel With Heading.</div>
  <div class="panel-footer clearfix"><button type="button" class="btn btn-primary pull-right">Read More</button></div>
</div>

Try it »

If you run the above example it will produce output like this –

Bootstrap Panel Group

You can make group of panels by adding a wrapper div with class .panel-group.
Here is an example of panel group-

Panel Group Example-

<div class="panel-group">
<div class="panel panel-default">
  <div class="panel-heading">My Heading 1</div>
  <div class="panel-body">Hi I Am Basic Panel With Heading.</div>
  </div>
  <div class="panel panel-default">
  <div class="panel-heading">My Heading 2</div>
  <div class="panel-body">Hi I Am Basic Panel With Heading.</div>
  </div>
</div>

Try it »

The above example will produce following output-

Bootstrap Panels with Contextual Classes

Bootstrap provides contextual classes to add color in panels which represents different states.
Here are available classes for panel state –

.panel-default – Represents Default States
.panel-primary – Primary State
.panel-success – Represents Success Message
.panel-info – Represents Information
.panel-warning – Represents Warning
.panel-danger – Represents Error Message With Danger State

Let us have look on each state with example And demo-

Bootstrap Panel States

Example-

<div class="panel panel-default">
  <div class="panel-heading">Panel with .panel-default class  </div>
  <div class="panel-body">Hi I Am Basic Panel With Heading.</div> 
</div>
<div class="panel panel-primary">
  <div class="panel-heading">Panel with .panel-primary class </div>
  <div class="panel-body">Hi I Am Basic Panel With Heading.</div>
  </div>
<div class="panel panel-success">
  <div class="panel-heading">Panel with .panel-success class </div>
  <div class="panel-body">Hi I Am Basic Panel With Heading.</div>
  </div> 
<div class="panel panel-info">
  <div class="panel-heading">Panel with .panel-info class  </div>
  <div class="panel-body">Hi I Am Basic Panel With Heading.</div>
  </div>
<div class="panel panel-warning">
  <div class="panel-heading">Panel with .panel-warning class </div>
  <div class="panel-body">Hi I Am Basic Panel With Heading.</div>
  </div> 
<div class="panel panel-danger">
  <div class="panel-heading">Panel with .panel-danger class  </div>
  <div class="panel-body">Hi I Am Basic Panel With Heading.</div>
</div>

Try it »

The above example will produce following output-

Tip : If you want to group together wrap them with a div hvaing the class .panel-group.

Bootstrap Home

Bootstrap Grid System

Bootstrap Buttons

Bootstrap Forms

Bootstrap Jumbotron

Bootstrap Navigation Bar

Bootstrap pagination

Bootstrap Alerts

Bootstrap Breadcrumbs