Bootstrap panels

Bootstrap’s panels provide a flexible and extensible content container with multiple variants. These options include, but are in no way limited to headers and footers, a wide variety of content, contextual background colors, and powerful display options. 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 its parent element. This is easily customized with our various sizing options.

Panel title

Some quick example text to build on the panel title and make up the bulk of the panel's content.

<Card className="card-body" style={{width: '22rem', marginTop: '1rem'}}>
  <CardTitle>Panel Title</CardTitle>
  <CardText>Some quick example text to build on the panel title and make up the bulk of the panel's content.</CardText>
  <div className="flex-row">
    <a>Card link</a>
    <a style={{marginLeft: '1.25rem'}}>Another link</a>
  </div>
</Card>

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 blocks of a panel are the Card and CardBody components. Use them whenever you need a padded section within a panel.

This is some text within a panel body.
<Card>
  <CardBody>
    This is some text within a panel body.
  </CardBody>
</Card>

Titles, text and links

Panel titles are used by using CardTitle component. It has a tag prop taking in a string value of <h*> (h4 is set as default). Links are added and placed next to each other by adding .card-link to a <a> tag.

Subtitles are used by adding a sub prop to CardTitle component and an appropriate tag prop string to make it smaller than the title (like h5 or h6). If the CardTitle and the CardTitle sub components are placed in a CardBody item, the panel title and subtitle are aligned nicely.

Panel title

Panel subtitle

Some quick example text to build on the panel title and make up the bulk of the panel's content.

Panel link Another link
<Card style={{width: '22rem', marginTop: '1rem'}}>
  <CardBody>
    <CardTitle>Panel title</CardTitle>
    <CardTitle tag="h6" sub className="mb-2 text-muted">Panel title</CardTitle>
    <CardText>Some quick example text to build on the panel title and make up the bulk of the panel's content. </CardText>
    <a href="#" className="card-link">Panel link</a>
    <a href="#" className="card-link">Another link</a>
  </CardBody>
</Card>

List groups

Create lists of content in a panel with a flush list group.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
<Card style={{width: '22rem', marginTop: '1rem'}}>
  <ListGroup>
    <ListGroupItem>Cras justo odio</ListGroupItem>
    <ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
    <ListGroupItem>Vestibulum at eros</ListGroupItem>
  </ListGroup>
</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 the grid, sizing utilities or custom CSS.

Using grid markup

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

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
<Row className="mb-4">
  <Col sm="6">
    <Card>
      <CardBody>
        <CardTitle>Special title treatment</CardTitle>
        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
        <Button color="primary">go somewhere</Button>
      </CardBody>
    </Card>
  </Col>

  <Col sm="6">
    <Card>
      <CardBody>
        <CardTitle>Special title treatment</CardTitle>
        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
        <Button color="primary">go somewhere</Button>
      </CardBody>
    </Card>
  </Col>
</Row>

Using utilities

Use our handful of available sizing utilities to quickly set a panel's width.

Card title

With supporting text below as a natural lead-in to additional content.

Button

Card title

With supporting text below as a natural lead-in to additional content.

Button
<Card className="w-75 mb-4">
  <CardBody>
    <CardTitle>Special title treatment</CardTitle>
    <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
    <Button color="primary">go somewhere</Button>
  </CardBody>
</Card>

<Card className="w-50">
  <CardBody>
    <CardTitle>Special title treatment</CardTitle>
    <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
    <Button color="primary">go somewhere</Button>
  </CardBody>
</Card>

Using custom CSS

Use custom CSS in your stylesheets or as inline styles to set a width.

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
<Card style={{width: '20rem'}}>
  <CardBody>
    <CardTitle>Special title treatment</CardTitle>
    <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
    <Button color="primary">go somewhere</Button>
  </CardBody>
</Card>

Text Alignment

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

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
<Card style={{width: '20rem', marginTop: '1rem'}}>
  <CardBody>
    <CardTitle>Special title treatment</CardTitle>
    <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
    <Button color="primary">go somewhere</Button>
  </CardBody>
</Card>

<Card className="text-center" style={{width: '20rem', marginTop: '1rem'}}>
  <CardBody>
    <CardTitle>Special title treatment</CardTitle>
    <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
    <Button color="primary">go somewhere</Button>
  </CardBody>
</Card>

<Card className="text-right" style={{width: '20rem', marginTop: '1rem'}}>
  <CardBody>
    <CardTitle>Special title treatment</CardTitle>
    <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
    <Button color="primary">go somewhere</Button>
  </CardBody>
</Card>


Styles

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

Background and color

Apply Card's color and text props to style panel's background and font color. Use CSS utilities for reference - in case of darker background colors it is adviced to go for bright font, the brithtest being invoked with text="white" prop.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<Row>
  <Col md="6" className="mb-4">

    <Card color="indigo" text="white" className="text-center">
      <CardBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </CardBody>
    </Card>

    <br/>

    <Card color="pink lighten-2" text="white" className="text-center">
      <CardBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </CardBody>
    </Card>

    <br/>

    <Card color="info-color" text="white" className="text-center">
      <CardBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </CardBody>
    </Card>

  </Col>
  <Col md="6">

    <Card color="red lighten-1" text="white" className="text-center">
      <CardBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </CardBody>
    </Card>

      <br/>

    <Card color="success-color" text="white" className="text-center">
      <CardBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </CardBody>
    </Card>

      <br/>

    <Card color="mdb-color lighten-2" text="white" className="text-center">
      <CardBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </CardBody>
    </Card>

  </Col>
</Row>

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

Border

Use border utilities to change just the border-color of a panel. Note that you can use Card's border prop to define the desired border color, as shown below.

Header
Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

<Card border="primary" className="mb-3" style={{maxWidth: '18rem'}}>
  <CardHeader>Header</CardHeader>
  <CardBody className="text-primary">
    <CardTitle tag="h5">Primary card title</CardTitle>
    <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
  </CardBody>
</Card>

<Card border="secondary" className="mb-3" style={{maxWidth: '18rem'}}>
  <CardHeader>Header</CardHeader>
  <CardBody className="text-secondary">
    <CardTitle tag="h5">Secondary card title</CardTitle>
    <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
  </CardBody>
</Card>

<Card border="success" className="mb-3" style={{maxWidth: '18rem'}}>
  <CardHeader>Header</CardHeader>
  <CardBody className="text-success">
    <CardTitle tag="h5">Success card title</CardTitle>
    <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
  </CardBody>
</Card>

<Card border="danger" className="mb-3" style={{maxWidth: '18rem'}}>
  <CardHeader>Header</CardHeader>
  <CardBody className="text-danger">
    <CardTitle tag="h5">Danger card title</CardTitle>
    <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
  </CardBody>
</Card>

<Card border="warning" className="mb-3" style={{maxWidth: '18rem'}}>
  <CardHeader>Header</CardHeader>
  <CardBody className="text-warning">
    <CardTitle tag="h5">Warning card title</CardTitle>
    <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
  </CardBody>
</Card>

<Card border="info" className="mb-3" style={{maxWidth: '18rem'}}>
  <CardHeader>Header</CardHeader>
  <CardBody className="text-info">
    <CardTitle tag="h5">Info card title</CardTitle>
    <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
  </CardBody>
</Card>

<Card border="light" className="mb-3" style={{maxWidth: '18rem'}}>
  <CardHeader>Header</CardHeader>
  <CardBody>
    <CardTitle tag="h5">Light card title</CardTitle>
    <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
  </CardBody>
</Card>

<Card border="dark" className="mb-3" style={{maxWidth: '18rem'}}>
  <CardHeader>Header</CardHeader>
  <CardBody className="text-dark">
    <CardTitle tag="h5">Dark card title</CardTitle>
    <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
  </CardBody>
</Card>

Mixin utilities

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

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

<Card border="success" style={{maxWidth: '18rem'}}>
  <CardHeader transparent border="success">Header</CardHeader>
  <CardBody className="text-success">
    <CardTitle tag="h5">Success card title</CardTitle>
    <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
  </CardBody>
  <CardFooter transparent border="success">Footer</CardFooter>
</Card>

Layout

In addition to styling the content within panels, Bootstrap includes a few options for laying out 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.

Panel title

This is a wider panel with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Panel title

This panel has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Panel title

This is a wider panel with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

<CardGroup>
  <Card>
    <CardBody>
      <CardTitle tag="h5">Panel title</CardTitle>
      <CardText>This is a wider panel with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
      <CardText small muted>Last updated 3 mins ago</CardText>
    </CardBody>
  </Card>
  <Card>
    <CardBody>
      <CardTitle tag="h5">Panel title</CardTitle>
      <CardText>This panel has supporting text below as a natural lead-in to additional content.</CardText>
      <CardText small muted>Last updated 3 mins ago</CardText>
    </CardBody>
  </Card>
  <Card>
    <CardBody>
      <CardTitle tag="h5">Panel title</CardTitle>
      <CardText>This is a wider panel with supporting text below as a natural lead-in to additional content. This panel has even longer content than the first to show that equal height action.</CardText>
      <CardText small muted>Last updated 3 mins ago</CardText>
    </CardBody>
  </Card>
</CardGroup>

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

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card title

This card has supporting text below as a natural lead-in to additional content.

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

<CardGroup>
  <Card>
    <CardBody>
      <CardTitle tag="h5">Panel title</CardTitle>
      <CardText>This is a wider panel with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
    </CardBody>
      <CardFooter small muted>Last updated 3 mins ago</CardFooter>
  </Card>
  <Card>
    <CardBody>
      <CardTitle tag="h5">Panel title</CardTitle>
      <CardText>This panel has supporting text below as a natural lead-in to additional content.</CardText>
    </CardBody>
      <CardFooter small muted>Last updated 3 mins ago</CardFooter>
  </Card>
  <Card>
    <CardBody>
      <CardTitle tag="h5">Panel title</CardTitle>
      <CardText>This is a wider panel with supporting text below as a natural lead-in to additional content. This panel has even longer content than the first to show that equal height action.</CardText>
    </CardBody>
      <CardFooter small muted>Last updated 3 mins ago</CardFooter>
  </Card>
</CardGroup>

Decks

Need a set of equal width and height panel that aren’t attached to one another? Use decks by the deck prop.

Panel title

This is a longer panel with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Panel title

This panel has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Panel title

This is a wider panel with supporting text below as a natural lead-in to additional content. This panel has even longer content than the first to show that equal height action.

Last updated 3 mins ago

<CardGroup deck>
  <Card>
    <CardBody>
      <CardTitle tag="h5">Panel title</CardTitle>
      <CardText>This is a wider panel with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
      <CardText small muted>Last updated 3 mins ago</CardText>
    </CardBody>
  </Card>
  <Card>
    <CardBody>
      <CardTitle tag="h5">Panel title</CardTitle>
      <CardText>This panel has supporting text below as a natural lead-in to additional content.</CardText>
      <CardText small muted>Last updated 3 mins ago</CardText>
    </CardBody>
  </Card>
  <Card>
    <CardBody>
      <CardTitle tag="h5">Panel title</CardTitle>
      <CardText>This is a wider panel with supporting text below as a natural lead-in to additional content. This panel has even longer content than the first to show that equal height action.</CardText>
      <CardText small muted>Last updated 3 mins ago</CardText>
    </CardBody>
  </Card>
</CardGroup>

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

Panel title

This is a wider panel with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Panel title

This panel has supporting text below as a natural lead-in to additional content.

Panel title

This is a wider panel with supporting text below as a natural lead-in to additional content. This panel has even longer content than the first to show that equal height action.

<CardGroup deck>
  <Card>
    <CardBody>
      <CardTitle tag="h5">Panel title</CardTitle>
      <CardText>This is a wider panel with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
    </CardBody>
      <CardFooter small muted>Last updated 3 mins ago</CardFooter>
  </Card>
  <Card>
    <CardBody>
      <CardTitle tag="h5">Panel title</CardTitle>
      <CardText>This panel has supporting text below as a natural lead-in to additional content.</CardText>
    </CardBody>
      <CardFooter small muted>Last updated 3 mins ago</CardFooter>
  </Card>
  <Card>
    <CardBody>
      <CardTitle tag="h5">Panel title</CardTitle>
      <CardText>This is a wider panel with supporting text below as a natural lead-in to additional content. This panel has even longer content than the first to show that equal height action.</CardText>
    </CardBody>
      <CardFooter small muted>Last updated 3 mins ago</CardFooter>
  </Card>
</CardGroup>

Columns

Panels can be organized into Masonry-like columns by adding a column prop to CardGroup. Panels are built with CSS column properties instead of flexbox for easier alignment. Panels are ordered from top to bottom and left to right.

Heads up! Your mileage with panel columns may vary. To prevent panels breaking across columns, we must set them to display: inline-block as column-break-inside: avoid isn’t a bulletproof solution yet.

Panel title that wraps to a new line

This is a longer panel with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Panel title

This panel has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title
Panel title

This panel has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Panel title

This is a wider panel with supporting text below as a natural lead-in to additional content. This panel has even longer content than the first to show that equal height action.

Last updated 3 mins ago

<CardGroup column>
  <Card>
    <CardBody>
      <CardTitle tag="h5">Panel title that wraps to a new line</CardTitle>
      <CardText>This is a longer panel with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
    </CardBody>
  </Card>
  <Card className="p-3">
    <blockquote className="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer className="blockquote-footer">
        <small className="text-muted">
        Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </Card>
  <Card>
    <CardBody>
      <CardTitle tag="h5">Panel title</CardTitle>
      <CardText>This panel has supporting text below as a natural lead-in to additional content.</CardText>
      <CardText small muted>Last updated 3 mins ago</CardText>
    </CardBody>
  </Card>

  <Card color="primary-color" text="white" className="text-center p-3">
    <blockquote className="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer className="blockquote-footer">
        <small className="text-muted">
        Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </Card>

  <Card className="text-center">
    <CardBody>
      <CardTitle tag="h5">Panel title</CardTitle>
      <CardText>This panel has supporting text below as a natural lead-in to additional content.</CardText>
      <CardText small muted>Last updated 3 mins ago</CardText>
    </CardBody>
  </Card>

  <Card className="text-right p-3">
    <blockquote className="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer className="blockquote-footer">
        <small className="text-muted">
        Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </Card>

  <Card>
    <CardBody>
      <CardTitle tag="h5">Panel title</CardTitle>
      <CardText>This is a wider panel with supporting text below as a natural lead-in to additional content. This panel has even longer content than the first to show that equal height action.</CardText>
      <CardText small muted>Last updated 3 mins ago</CardText>
    </CardBody>
  </Card>

</CardGroup>

Jumbotron

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

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


It uses utility classes for typography and spacing to space content out within the larger container.

Learn more
<Jumbotron>
  <h1 className="h1-responsive">Hello, world!</h1>
  <p className="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention
      to featured content or information.</p>
  <hr className="my-2"/>
  <p>It uses utility classNamees for typography and spacing to space content out within the larger
      container.
  </p>
  <Button color="primary" size="lg">Learn more</Button>
</Jumbotron>