Panels

React Bootstrap Panels

Bootstrap React panels are bordered boxes where you can place texts, lists, tables and other content. Panels are similar to cards, but they don't include media.

Basic example

Panels are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no margin by default, so use spacing utilities as needed.

Below is an example of a basic panel with mixed content and a fixed width. Panels have no fixed width to start, so they’ll naturally fill the full width of their parent element. This is easily customized with our various sizing options.

Content types

Panels support a wide variety of content, including text, list groups, links, and more. Below are examples of what’s supported.

Body

The building block of a panel is the .card-body. Use it whenever you need a padded section within a panel.

Titles, text, and links

Panel titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .card-link to a <a> tag.

Subtitles are used by adding a .card-subtitle to a <h*> tag. If the .card-title and the .card-subtitle items are placed in a .card-body item, the panel title and subtitle are aligned nicely.

List groups

You can create lists of content in a card with a flush list group.

Header and footer

Panel headers can be styled by adding .card-header to <h*> elements.

Add an optional header and/or footer within a card.

Sizing

Panels assume no specific width to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.

Using grid markup

Using the grid, wrap panels in columns and rows as needed.

Using utilities

It's easy to use our handful of available sizing utilities to quickly set a panel's width.

Using custom CSS

Custom CSS can be used in your stylesheets or as inline styles to set a width.

Text alignment

You can quickly change the text alignment of any card—in its entirety or specific parts—with our text-align classes.

Navigation

Add some navigation to a panel's header (or block) with Bootstrap’s nav components.

Panel styles

Panels include various options for customizing their backgrounds, borders, and color.

Background and color

Use text and background utilities to change the appearance of a card.

Border

Use border utilities to change just the border-color of a card. Note that you can put .text-{color} classes on the parent .card or a subset of the panel's contents as shown below.

Mixins utilities

You can also change the borders on the card header and footer as needed, and even remove their background-color with .bg-transparent.

Panel layout

In addition to styling the content within panels, Bootstrap includes a few options for laying out a series of panels. For the time being, these layout options are not yet responsive.

Groups

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.

When using card groups with footers, their content will automatically line up.

Decks

Need a set of equal width and height panels that aren’t attached to one another? Use decks.

Just like with panel groups, card footers in decks will automatically line up.

Jumbotron

A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.

Related resources