Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this section of our Bootstrap tutorial, we are going to be discussing about the Bootstrap Panels.
Panel components are used when you want to put a DOM component in a box. To get a basic panel, add a .panel class to the <div> element. Also add the .panel-default class to this element.
Panel components are used when you want to put a DOM component in a box. To get a basic panel, add a .panel class to the <div> element. Also add the .panel-default class to this element.
Example
Following example demonstrates this -
<div class = "panel panel-default"> <div class = "panel-body"> This is a Basic panel </div> </div>
Output
When the above example is executed, it will produce the following result -
This is a Basic panel
Penel with Heading
There are two ways of adding panel heading -
- Use the .panel-heading class to easily add a heading container to a panel.
- Use any <h1>-<h6> with a .panel-title class to add a pre-styled heading.
Example
Following example demonstrates this -
<div class = "panel panel-default"> <div class = "panel-heading"> Panel heading without title </div> <div class = "panel-body"> Panel content </div> </div> <div class = "panel panel-default"> <div class = "panel-heading"> <h3 class = "panel-title"> Panel With title </h3> </div> <div class = "panel-body"> Panel content </div> </div>
Output
When the above example is executed, it will produce the following result -
Panel heading without titlePanel contentPanel With title
Panel content
READ: Bootstrap | List Group
Panel with Footer
You can add footers to panels, by wrapping buttons or secondary text in a <div> which contains .panel-footer class.
Example
Following example demonstrates this -
<div class = "panel panel-default"> <div class = "panel-body"> This is a Basic panel </div> <div class = "panel-footer">Panel footer</div> </div>
Output
When the above example is executed, it will produce the following result -
This is a Basic panel
READ: Bootstrap | Object
Panel Contextual Alternatives
Make use of contextual state classes such as panel-primary, panel-success, panel-info, panel-warning, and panel-danger, to make a panel a lot more meaningful to a particular context.
Example
Following example demonstrates this -
<div class = "panel panel-primary"> <div class = "panel-heading"> <h3 class = "panel-title">Panel title</h3> </div> <div class = "panel-body"> This is a Basic panel </div> </div> <div class = "panel panel-success"> <div class = "panel-heading"> <h3 class = "panel-title">Panel title</h3> </div> <div class = "panel-body"> This is a Basic panel </div> </div> <div class = "panel panel-info"> <div class = "panel-heading"> <h3 class = "panel-title">Panel title</h3> </div> <div class = "panel-body"> This is a Basic panel </div> </div> <div class = "panel panel-warning"> <div class = "panel-heading"> <h3 class = "panel-title">Panel title</h3> </div> <div class = "panel-body"> This is a Basic panel </div> </div> <div class = "panel panel-danger"> <div class = "panel-heading"> <h3 class = "panel-title">Panel title</h3> </div> <div class = "panel-body"> This is a Basic panel </div> </div>
Output
When the the above example is executed, it will produce the following result -
Panel title
This is a Basic panelPanel title
This is a Basic panelPanel title
This is a Basic panelPanel title
This is a Basic panelPanel title
This is a Basic panel
Panel with Tables
To get a non-bordered table within a panel, make use of .table class 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> having .panel-body class, the component moves from panel header to table without interruption.
Example
Following example demonstrates this -
<div class = "panel panel-default"> <div class = "panel-heading"> <h3 class = "panel-title">Panel title</h3> </div> <div class = "panel-body"> This is a Basic panel </div> <table class = "table"> <tr> <th>Product</th> <th>Price </th> </tr> <tr> <td>Product A</td> <td>200</td> </tr> <tr> <td>Product B</td> <td>400</td> </tr> </table> </div> <div class = "panel panel-default"> <div class = "panel-heading">Panel Heading</div> <table class = "table"> <tr> <th>Product</th> <th>Price </th> </tr> <tr> <td>Product A</td> <td>200</td> </tr> <tr> <td>Product B</td> <td>400</td> </tr> </table> </div>
Output
When the above example is executed, it will produce the following result -
Panel title
This is a Basic panel
Product Price Product A 200 Product B 400 Panel Heading
Product Price Product A 200 Product B 400
Panel with List Groups
You can include list group within any panel. Create a panel by adding .panel class to the <div> element. Also add .panel-default class to the element. So within this panel you can now include your list groups.
Example
Following example demonstrates this -
<div class = "panel panel-default"> <div class ="panel-heading">Panel heading</div> <div class = "panel-body"> <p>This is a Basic panel content. This is a Basic panel content. This is a Basic panel content. This is a Basic panel content. This is a Basic panel content. This is a Basic panel content. This is a Basic panel content.</p> </div> <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">Number of Images</li> <li class = "list-group-item">24*7 support</li> <li class = "list-group-item">Renewal cost per year</li> </ul> </div>
Output
When the above example is executed, it will produce the following result -
Panel headingThis is a Basic panel content. This is a Basic panel content. This is a Basic panel content.This is a Basic panel content. This is a Basic panel content.This is a Basic panel content. This is a Basic panel content.
- Free Domain Name Registration
- Free Window Space hosting
- Number of Images
- 24*7 support
- Renewal cost per year
READ: Bootstrap | Alerts
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Wells.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.