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>
other useful links:
1>Bootstrap Grid System
3>Working with scrollspy in bootstrap
5>Dropdown buttons in Bootstrap
6>Bootstrap Dropdown Menu