Bootstrap Panels

Bootstrap Cards (Formerly Panels)

Cards

In Bootstrap 5, Panels have been replaced by Cards. A card is a flexible and extensible content container. It includes options for headers, footers, content, colors, and more. They are built with flexbox, offering easy alignment and sizing.

A Basic Card

Cards are created with the .card class, and content inside the card typically uses a .card-body class:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Card Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3">
  <div class="card" style="width: 18rem;">
    <div class="card-body">
      <h5 class="card-title">Card Title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Cards can also include images, lists, and other elements. By default, cards have no fixed width, so they’ll naturally fill the full width of their parent. You can constrain their widths using custom CSS, grid classes, or utilities.

Card Header

The .card-header class adds a heading section to the card:

<div class="card">
  <div class="card-header">
    Featured Header
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Card Footer

The .card-footer class adds a footer section to the card:

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Card content goes here.</p>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Card Groups

To group multiple cards together with equal width and height in a single row, wrap them in a <div> with class .card-group. Card groups use display: flex; to achieve their uniform sizing.

Note: When using card groups, card footers will automatically line up.

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">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.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

For card layouts like decks or masonry-style columns, refer to Bootstrap’s Grid cards or Masonry examples in the official documentation.

Cards with Contextual Backgrounds and Borders

To color the card, you can use Bootstrap’s background color utility classes (e.g., .bg-primary, .bg-success) and text color utilities (e.g., .text-white). You can also use border color utilities (e.g., .border-primary).

Example of cards with background colors:

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text.</p>
  </div>
</div>
<div class="card text-bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text.</p>
  </div>
</div>
<div class="card text-bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text.</p>
  </div>
</div>
<!-- Add more examples for .text-bg-danger, .text-bg-warning, .text-bg-info, .text-bg-light, .text-bg-dark -->

Example of cards with border colors:

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary border card</h5>
    <p class="card-text">Some quick example text.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success border card</h5>
    <p class="card-text">Some quick example text.</p>
  </div>
</div>
<!-- Add more examples for .border-danger, .border-warning, etc. -->

For a complete guide on cards, including image overlays, horizontal layouts, and more, please visit the official Bootstrap 5 Card documentation.