We now have a youtube channel. Subscribe!

Bootstrap | Panels

Bootstrap | Penels


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.

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 title
Panel content

Panel With title

Panel content


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


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 panel

Panel title

This is a Basic panel

Panel title

This is a Basic panel

Panel title

This is a Basic panel

Panel 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
ProductPrice
Product A200
Product B400
Panel Heading
ProductPrice
Product A200
Product B400

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 heading

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.

  • Free Domain Name Registration
  • Free Window Space hosting
  • Number of Images
  • 24*7 support
  • Renewal cost per year


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.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain