Bootstrap panels

This article will discuss about Bootstrap panels. Panel component are used when we want to put your DOM component in a box. To get a basic panel, just add class .panel to the <div> element. Also add class .panel-default to this element.

Panel with heading:

There are two ways to add panel heading.

  • Use .panel-heading class to easily add a heading container to your panel.
  • Use any <h1>-<h6> with a .panel-title class to add a pre-styled heading.

Panel with footer:

We can add footers to panels, by wrapping buttons or secondary text in a <div> containing class .panel-footer.Panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.

Panel with tables:

To get a non-bordered table within a panel, use class .table within the panel. Suppose there is a <div> containing .panel-body, we add an extra border to the top of the table for separation. If there is no <div> containing .panel-body, then the component moves from panel header to table without interruption.

Panel with Listgroups:
We can include list groups within any panel. Create a panel by adding class .panel to the <div> element. Also add class .panel-default to this element. Now within this panel include your list groups.

In the above we have discussed about the features. Now let us go through a sample code of a software company’s customer info receipt.

<div class="panel panel-default">
    <div class="panel-heading">
      Software Services
   </div><br />
   <div class="panel-heading">
      Software Cost
   </div>
   <div class="panel-body">
     <table class="table">
     <thead><th>Product</th><th>Price </th></thead>
      <tbody>
      <tr><td>Software</td><td>2000</td></tr>
      <tr><td>Manual</td><td>400</td></tr></tbody>
   </table>
   </div>
     <div class="panel-heading">
      Including Services
   </div>
   <div class="panel-body"> <ul class="list-group">
      <li class="list-group-item">Free Domain Name Registration</li>
      <li class="list-group-item">Free Window Space hosting</li>
        <li class="list-group-item">24*7 support</li>
    </ul></div>
    <div class="panel-footer">Contact us - software services.in</div>
</div> 

panel

other useful links:
1>Bootstrap Grid System
2>Bootstrap Nav-bar
3>Working with scrollspy in bootstrap
4>Bootstrap list-group
5>Dropdown buttons in Bootstrap
6>Bootstrap Dropdown Menu
7>Bootstrap tables
8>Bootstrap Alerts

If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address: Delivered by FeedBurner

Leave a Reply

Your email address will not be published. Required fields are marked *