Bootstrap panels: simple and collapsible 5 demos

The panel component in Bootstrap

The panel, which is a built-in component in Bootstrap, can be used to present content in a box. You may specify different styles for panels by using various built-in classes.

The panel may contain the heading for a content box while you may add content below it within that panel.

By using JavaScript / jQuery code, you may even create collapsible panels in Bootstrap. I will show you simple and collapsible panel demos in this tutorial.

A demo of creating a simple panel

A panel can be created by using the main panel class. You may use this in a <div> element where you may also specify the style of that panel. See the following demo, where div is assigned the panel and panel-default classes. The panel is simple that does not contain any other content than heading:

bootstrap panel default

See online demo and code

You only need to add the CSS reference of Bootstrap in the <head> section. Following is the markup used for creating this basic panel:

 

The div with panel-body class contains the heading of that panel. If you want other standard colors in panels then (for example) use the panel-danger for red, panel-info for light blue, panel-primary for blue, panel-success for green etc.  in place of panel-default classes. See the demonstration of this below after an example of the panel with the content.

A demo of panel with heading and content

In this example, the panel is created with a heading and content inside it. For that, the main div contains the panel class along with panel  class. The next div is given the panel-heading class and after that comes the panel-body class in another div element. Have a look:

bootstrap panel

See online demo and code

The markup:

 

A demo of various colored panels

In this demo, a number of panels are created by using contextual classes like panel-danger, panel-info etc. Have a look:

bootstrap panel contextual

See online demo and code

Following is the markup used for creating contextual panels:

 

A demo of panel with list group

As mentioned earlier, you may use different piece of content inside the panel. In this example, the panel is created with group-list. See the demo by clicking the link or image below:

bootstrap panel list group

See online demo and code

The markup:

 

A demo of collapsible panels

In this demo, a Bootstrap collapsible panel is created by using the CSS. Although, you need to include the jQuery and Bootstrap’s JS libraries unlike above examples.

The glyph icon is used on the right side of the panel that will toggle the panel current state. So, if it is opened, upon clicking the icon, the content panel will hide and vice versa. Have a look:

bootstrap panel collapse

See online demo and code

 

The CSS:

 

The markup:

 

Get the complete code from the demo page.