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

Update for Bootstrap 4 Beta

Changelog – Panels, thumbnails, and wells 

  • Dropped entirely for the new card component.

Panels

1. .panel to .card, now built with flexbox.
2. .panel-default removed and no replacement.
3. .panel-group removed and no replacement. .card-group is not a replacement, it is different.
4. .panel-heading to .card-header
5. .panel-title to .card-title. Depending on the desired look, you may also want to use heading elements or classes (https://mdbootstrap.com/content/typography/#headings) (e.g. <h3>, .h3) or bold elements or classes (e.g. <strong>, <b>, .font-weight-bold (https://mdbootstrap.com/utilities/typography/#font-weight-and-italics)). Note that .card-title, while similarly named, produces a different look than .panel-title.
6. .panel-body to .card-body
7. .panel-footer to .card-footer
8. .panel-primary to .card-primary and .card-inverse (or use .bg-primary on .card-header)
9. .panel-success to .card-success and .card-inverse (or use .bg-success on .card-header)
10. .panel-info to .card-info and .card-inverse (or use .bg-info on .card-header)
11. .panel-warning to .card-warning and .card-inverse (or use .bg-warning on .card-header)
12. .panel-danger to .card-danger and .card-inverse (or use .bg-danger on .card-header)


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