Bootstrap Panels

This tutorial is about Bootstrap Panels. While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.

Basic example

To make a basic panel, simply apply class .panel to the <div> tag. Also add class .panel-default to this element as you can see in the following example:

Panel with heading

You can easily add a heading container to you panel with two ways:

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

This example show the both ways:

Panel with footer

By wrapping buttons or secondary text in a <div> with this class .panel-footer you can add footer to panels. Below mentioned example will show you.

Note: Panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.

Panel Contextual alternatives

By adding any of the contextual state classes (.panel-primary, .panel-success, .panel-info, .panel-warning and .panel-danger) you can make a panel more meaningful to a particular context just like other components.

Panel with tables

To use any non-bordered table inside the panel use this .table class for a seamless design. If there is a .panel-body, we add an extra border to the top of the table for separation.

Following example demonstrates this:

Panel with Listgroups

Everyone easily can include list groups within any panel by following these steps.

  • Make a panel by using .panel class to the <div> tag.
  • Also assign .panel-default class to this tag.

Now inside this panel inserts your list groups. How to create List groups, you can learn to create a list group from tutorial List Groups.

Leave a Reply

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