Bootstrap Panel Example

Bootstrap Panel Tutorial

What is a Bootstrap Panel?

In this post I will present to you the Bootstrap panels. These components are used when you want to put your DOM component in a box. To get a basic panel, just add class .panel to the <div> element.

A Bootstrap panel is a bordered box that has padding around it.

The class for this is .panel and the content inside it is .panel-body

Simple Example 

The Output:

Bootstrap Panel - Simple Example

Bootstrap Panel Heading 

You can simply add the .panel-heading class.

Panel Footer

Class is .panel-footer

Panel Group

If you want to group panels together, use <div> as a wrap with class .panel-group around it.

Observation: The .panel-group clears the bottom-margin of each panel.

Contextual Classes

You can add contextual classes like:

  1. .panel-primary
  2. .panel-success
  3. .panel-info
  4. .panel-warning
  5. .panel-danger

Panel with Tables

To create a non-boredered table with a panel, use the class .table within it.


Panel with List groups

Inside of any panel, you can include list groups. Just add it inside the <div> element of your .panel.




Bootstrap Panel Examples


Bootstrap Panel Example Bootstrap Panel Example Bootstrap Panel Example Bootstrap Panel Example

If you want, you can learn more about Bootstrap Panels and other components here.

Pavel Malos

Creating Digital Experiences @ BootstrapBay