Here we are solving a basic problem faced by a beginner web developer in bootstrap i.e. designing a panel.

Objectives and Outcomes

We will examine a Bootstrap component: Panels and their use for displaying content. At the end of this exercise, you will be able to:
1) Display content in a web page using Panels using Bootstrap Panel classes.

Create a basic panel

We will now add a simple panel to the web page. Start by adding the following code to the body.

<div class="panel panel-success">
  <div class="panel-heading">This is panel heading</div>
  <div class="panel-body">This is panel body</div>
  <div class="panel-footer">This is panel Footer</div>
</div>
output

In the above code, we can see the use of the class panel to specify the panel for the website. This panel class is used to specify the panel. The panel-heading class adds a heading to the panel. The panel-body class adds a body to the panel. The panel-footer class adds a footer to the panel. The panel-success class is used to style the color of the panel.

Another Example of a complete panel


<div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">Facts At a Glance</h3>
            </div>
            <div class="panel-body">
              <dl class="dl-horizontal">
                <dt>Started</dt>
                <dd>3 Feb. 2013</dd>
                <dt>Major Stake Holder</dt>
                <dd>HK Fine Foods Inc.</dd>
                <dt>Last Year Turnover</dt>
                <dd>$1,250,375</dd>
                <dt>Employees</dt>
                <dd>40</dd>
              </dl>
            </div>
</div>
output





Note the use of the panel and panel-primary classes to style the panel. The panel contains two divs, one with panel-heading class to host the heading of the panel, and the second with the panel-body class to host the content. Note the use of <dl> tag with the dl-horizontal class to create a horizontal description list.

How to make a panel group


<div class="panel-group">
  <div class="panel panel-default">
        <div class="panel-heading">
	Panel with panel-default class
	</div>
	<div class="panel-body">Panel Content</div>
  </div>
  <div class="panel panel-primary">
	<div class="panel-heading">
	Panel with panel-primary class
	</div>
	<div class="panel-body">Panel Content</div>
  </div>
  <div class="panel panel-success">
	<div class="panel-heading">
	Panel with panel-success class
	</div>
	<div class="panel-body">Panel Content</div>
  </div>
  <div class="panel panel-info">
	<div class="panel-heading">
	Panel with panel-info class
	</div>
	<div class="panel-body">Panel Content</div>
  </div>
  <div class="panel panel-danger">
	<div class="panel-heading">
	Panel with panel-danger class
	</div>
	<div class="panel-body">Panel Content</div>
  </div>
  <div class="panel panel-warning">
	<div class="panel-heading">
	Panel with panel-warning class
	</div>
	<div class="panel-body">Panel Content</div>
  </div>
</div>
output

To group many panels together, wrap a div with class panel-group around them. The panel-group class clears the bottom-margin of each panel.