Bootstrap - Card

This chapter will discuss about Bootstrap cards. Bootstrap cards provide flexible and extensible content containers with many flavors and options. A card is a flexible and extensible container for content. It includes header and footer options, different content, contextual background colors, and effective display options.

Basic card

  • To create a basic card use the class .card. Use spacing utilities when required because cards don't come with margins.

  • The basic card with mixed content and a fixed width is demonstrated here. Cards naturally cover the entire width of their parent element since they have no fixed width. With many sizing choices, this is easily customizable.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Card</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="card" style="width: 15rem;">
        <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          <a href="#" class="btn btn-primary">Get More information</a>
        </div>
      </div>
    </body>
    </html>

Content types

Cards support a various type of content including images, text, list groups, and links. Below are examples of what's supported.

Body

Add the class .card-body whenever you require a padded section within a card.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Card</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="card">
        <div class="card-body">
          Card body section.
        </div>
      </div>
    </body>
    </html>

Titles, text, and links

  • Use the card title by adding the class .card-title to the <h*> tag. You can similarly add and tile links by adding .card-link to the <a> tag.

  • Placing the .card-title and .card-subtitle elements in the .card-body element ensures that the card title and subtitle line up nicely. Subtitles are used by adding .card-subtitle to the <h*> tag.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">Mr. Jhon</h5>
        <h6 class="card-subtitle mb-2 text-body-secondary">HR</h6>
        <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
        <a href="#" class="card-link">More info</a>
      </div>
    </div>
  </body>
  </html>

Images

  • The class .card-img-top places the image above the card.

  • You can add text to the card using .card-text. The text within .card-text can also be styled using standard HTML tags.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Card</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="card" style="width: 18rem;">
        <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
        <div class="card-body">
          <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
        </div>
      </div>
    </body>
    </html>

List groups

Use flush list groups to create content lists on cards. Add the class .list-group-flush.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Card</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="card" style="width: 18rem;">
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Item 1</li>
          <li class="list-group-item">Item 2</li>
          <li class="list-group-item">Item 3</li>
        </ul>
      </div>
    </body>
    </html>

Use flush list groups to create header content lists on cards. Add the header to the list group of card by adding the class .card-header.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
    <div class="card" style="width: 18rem;">
      <div class="card-header">
          Header
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">Item 1</li>
        <li class="list-group-item">Item 2</li>
        <li class="list-group-item">Item 3</li>
      </ul>
    </div>
    </body>
    </html>

Use flush list groups to create footer content lists on cards. Add the footer to the list group of card by adding the class .card-footer.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card" style="width: 18rem;">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">Item 1</li>
        <li class="list-group-item">Item 2</li>
        <li class="list-group-item">Item 3</li>
      </ul>
      <div class="card-footer">
        Card Footer
      </div>
    </div>
  </body>
  </html>

Kitchen sink

Combine multiple content types to create the card you want, or populate it all. Below are image styles, blocks, text styles, and list groups, all grouped into fixed-width card.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card" style="width: 18rem;">
      <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">Item 1</li>
        <li class="list-group-item">Item 2</li>
        <li class="list-group-item">Item 3</li>
      </ul>
      <div class="card-body">
        <a href="#" class="card-link">Link  1</a>
        <a href="#" class="card-link">Link 2</a>
      </div>
    </div>
  </body>
  </html>

Header and footer

Include an optional header and/or footer inside a card.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card">
      <div class="card-header">
        Card Header
      </div>
      <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
        <a href="#" class="btn btn-primary">Get more info</a>
      </div>
      <div class="card-footer">
         Card Footer
      </div>
    </div>
  </body>
  </html>

You can style the card header by adding .card-header to the <h*> element.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Card</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <div class="card">
    <h5 class="card-header">Card Header</h5>
    <div class="card-body">
      <h5 class="card-title">Card Title</h5>
      <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
      <a href="#" class="btn btn-primary">Get more info</a>
    </div>
  </div>
</body>
</html>

To highlight, add the class .blockquote mb-0 to the .blockquote.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Card</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <div class="card">
    <div class="card-header">
      Quote
    </div>
    <div class="card-body">
      <blockquote class="blockquote mb-0">
        <p>blockquote element</p>
        <footer class="blockquote-footer">Blockquote footer <cite title="Source Title">Source Title</cite></footer>
      </blockquote>
    </div>
  </div>
</body>
</html>

Align the text of whole card at the center with the class .text-center.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card text-center">
      <div class="card-header">
        Rose
      </div>
      <div class="card-body">
        <h5 class="card-title">A rose is a flower that people in love give each other.</h5>
        <p class="card-text">Roses have multi-layered petals and smell wonderfully sweet. They come in a wide variety of colors that can convey various meanings.</p>
        <a href="#" class="btn btn-primary">More info</a>
      </div>
    </div>
  </body>
  </html>

Sizing

Card width is 100% unless otherwise stated. This can be customized using custom CSS, grid classes, grid sass mixins, or utilities.

Using grid markup

Use a grid to wrap your cards into columns and rows as required.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="row">
      <div class="col-sm-6 mb-3 mb-sm-0">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
            <a href="#" class="btn btn-primary">Get more info</a>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
            <a href="#" class="btn btn-primary">Get more info</a>
          </div>
        </div>
      </div>
    </div>
  </body>
  </html>

Using utilities

Quickly set the width of your card using some of the available resizing utilities.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card w-75 mb-3">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content..</p>
        <a href="#" class="btn btn-primary">Card Button</a>
      </div>
    </div>

    <div class="card w-50">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
        <a href="#" class="btn btn-primary">Card Button</a>
      </div>
    </div>
  </body>
  </html>

Using custom CSS

Use custom CSS in your style sheet or as an inline style to set the width.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
        <a href="#" class="btn btn-primary">Get more info</a>
      </div>
    </div>
  </body>
  </html>

Text alignment

Text Alignment classes allow you to quickly change the text alignment of the entire card or specific parts.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card mb-3" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">The text alignment of the card at the left.</p>
        <a href="#" class="btn btn-primary">Get more info</a>
      </div>
    </div>
    <div class="card text-center mb-3" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">The text alignment of the card at the center.</p>
        <a href="#" class="btn btn-primary">Get more info</a>
      </div>
    </div>
    <div class="card text-end" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">The text alignment of the card at the right.</p>
        <a href="#" class="btn btn-primary">Get more info</a>
      </div>
    </div>
  </body>
  </html>

Navigation

Add navigation to the header (or block) of your card using Bootstrap navigation components.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card text-center">
      <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs">
          <li class="nav-item">
            <a class="nav-link active" aria-current="true" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled">About us</a>
          </li>
        </ul>
      </div>
      <div class="card-body">
        <h5 class="card-title">Rose</h5>
        <p class="card-text">Roses have multi-layered petals and smell wonderfully sweet. They come in a wide variety of colors that can convey various meanings.</p>
        <a href="#" class="btn btn-primary">Get more info</a>
      </div>
    </div>
  </body>
  </html>

Get the Bootstrap navigation components by adding the class .nav-pills.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card text-center">
      <div class="card-header">
        <ul class="nav nav-pills card-header-pills">
          <li class="nav-item">
            <a class="nav-link active" href="#" >Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled">About us</a>
          </li>
        </ul>
      </div>
      <div class="card-body">
        <h5 class="card-title">Rose</h5>
        <p class="card-text">Roses have multi-layered petals and smell wonderfully sweet. They come in a wide variety of colors that can convey various meanings.</p>
        <a href="#" class="btn btn-primary">Get more info</a>
      </div>
    </div>
  </body>
  </html>

Images

Cards contain several options for working with images. Choose to have "image caps" on each side of the card, overlay the image on the card's contents, or simply embed the image into the card.

Image caps

Cards can have "image caps" at top and bottom (images at the top or bottom of the card), similar to headers and footers as demonstrated below.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card mb-3">
      <img src="\bootstrap\images\tutimg2.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
        <p class="card-text"><small class="text-body-secondary">2 mins ago</small></p>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
        <p class="card-text"><small class="text-body-secondary">5 mins ago</small></p>
      </div>
      <img src="\bootstrap\images\tutimg2.jpg" class="card-img-bottom" alt="...">
    </div>
  </body>
  </html>

Images overlays

Turn an image into a card background and overlay the card text. Some images may require additional styling or utility.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card text-bg-dark">
      <img src="\bootstrap\images\tutimg2.jpg" class="card-img" alt="...">
      <div class="card-img-overlay">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
        <p class="card-text"><small>2 mins ago</small></p>
      </div>
    </div>
  </body>
  </html>
Note: It is important note that text/content should not exceed the height of the image, as this will cause it to be displayed outside the frame.

Horizontal

By using a combination of grid and utility classes, you can create cards horizontally in a mobile-friendly and responsive way. In the example below, .g-0 removes the grid bars and uses the .col-md-* classes to level the card at the md breakpoints.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card mb-3" style="max-width: 540px;">
      <div class="row g-0">
        <div class="col-md-4">
          <img src="\bootstrap\images\tutimg.png" class="img-fluid rounded-start" alt="...">
        </div>
        <div class="col-md-8">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
            <p class="card-text"><small class="text-body-secondary">1 mins ago</small></p>
          </div>
        </div>
      </div>
    </div>
  </body>
  </html>

Card styles

A wide range of background, border, and color customization choices are available for cards.

Background and color

Added in v5.2.0

  • Using .text-bg-{color} helpers, you can set a background color with a contrasting foreground color.

  • Previously, pairing .text-color and .bg-color utilities manually was necessary for styling, you can still do so if you prefer.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card text-bg-primary mb-3" style="max-width: 18rem;">
      <div class="card-header">Primary</div>
      <div class="card-body">
        <p class="card-text">A card with primary background-color.</p>
      </div>
    </div>
    <div class="card text-bg-secondary mb-3" style="max-width: 18rem;">
      <div class="card-header">Secondary</div>
      <div class="card-body">
        <p class="card-text">A card with secondary background-color.</p>
      </div>
    </div>
    <div class="card text-bg-success mb-3" style="max-width: 18rem;">
      <div class="card-header">Success</div>
      <div class="card-body">
        <p class="card-text">A card with success background-color.</p>
      </div>
    </div>
    <div class="card text-bg-danger mb-3" style="max-width: 18rem;">
      <div class="card-header">Danger</div>
      <div class="card-body">
        <p class="card-text">A card with danger background-color.</p>
      </div>
    </div>
    <div class="card text-bg-warning mb-3" style="max-width: 18rem;">
      <div class="card-header">Warning</div>
      <div class="card-body">
        <p class="card-text">A card with warning background-color.</p>
      </div>
    </div>
    <div class="card text-bg-info mb-3" style="max-width: 18rem;">
      <div class="card-header">Info</div>
      <div class="card-body">
        <p class="card-text">A card with info background-color.</p>
      </div>
    </div>
    <div class="card text-bg-light mb-3" style="max-width: 18rem;">
      <div class="card-header">light</div>
      <div class="card-body">
        <p class="card-text">A card with light background-color.</p>
      </div>
    </div>
    <div class="card text-bg-dark mb-3" style="max-width: 18rem;">
      <div class="card-header">Dark</div>
      <div class="card-body">
        <p class="card-text">A card with dark background-color.</p>
      </div>
    </div>
  </body>
  </html>

Border

By using the border utilities you can change the card border-color. Note that the .text-{color} class can be placed on the parent .card or a subset of the card's content as shown below.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card border-primary mb-3" style="max-width: 18rem;">
      <div class="card-header">Primary</div>
      <div class="card-body text-primary">
        <p class="card-text">A card with primary border-color.</p>    
      </div>
    </div>
    <div class="card border-dark mb-3" style="max-width: 18rem;">
      <div class="card-header">Dark</div>
      <div class="card-body">
        <p class="card-text">A card with dark border-color.</p>
      </div>
    </div>
    <div class="card border-secondary mb-3" style="max-width: 18rem;">
      <div class="card-header">Secondary</div>
      <div class="card-body text-secondary">
        <p class="card-text">A card with secondary border-color.</p>    
      </div>
    </div>
    <div class="card border-light mb-3" style="max-width: 18rem;">
      <div class="card-header">Light</div>
      <div class="card-body">
        <p class="card-text">A card with light border-color.</p>
      </div>
    </div>
    <div class="card border-danger mb-3" style="max-width: 18rem;">
      <div class="card-header">Danger</div>
      <div class="card-body text-danger">
        <p class="card-text">A card with light border-color.</p>    
      </div>
    </div>
    <div class="card border-warning mb-3" style="max-width: 18rem;">
      <div class="card-header">Warning</div>
      <div class="card-body">
        <p class="card-text">A card with warning border-color.</p>    
      </div>
    </div>
    <div class="card border-success mb-3" style="max-width: 18rem;">
      <div class="card-header">Success</div>
      <div class="card-body text-success">
        <p class="card-text">A card with success  border-color.</p>    
      </div>
    </div>
    <div class="card border-info mb-3" style="max-width: 18rem;">
      <div class="card-header">Info</div>
      <div class="card-body">
        <p class="card-text">A card with info border-color.</p>
      </div>
    </div>
  </body>
  </html>

Mixins utilities

You can also change the card header and footer borders and remove the background color with .bg-transparent if you like.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card border-info mb-3" style="max-width: 18rem;">
      <div class="card-header bg-transparent border-info">Card Header</div>
      <div class="card-body text-info">
        <h5 class="card-title">Info card title</h5>
        <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
      </div>
      <div class="card-footer bg-transparent border-info">Card Footer</div>
    </div>
  </body>
  </html>

Card layout

In addition to styling and customising the content in your card, Bootstrap provides several options for arranging card in series. Currently, these layout options are not responsive. Following sections demonstrates this.

Card groups

Card groups render cards as a single attached element with columns of the same width and height. Card groups are stacked. They use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="card-group">
      <div class="card">
        <img src="\bootstrap\images\tutimg2.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          <p class="card-text"><small class="text-body-secondary">1 mins ago</small></p>
        </div>
      </div>
      <div class="card">
        <img src="\bootstrap\images\tutimg2.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          <p class="card-text"><small class="text-body-secondary">2 mins ago</small></p>
        </div>
      </div>
      <div class="card">
        <img src="\bootstrap\images\tutimg2.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          <p class="card-text"><small class="text-body-secondary">3 mins ago</small></p>
        </div>
      </div>
    </div>
  </body>
  </html>

Use a card group with a footer, its content is automatically arranged.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
   <title>Bootstrap - Card</title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
   <div class="card-group">
     <div class="card">
       <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
       </div>
       <div class="card-footer">
         <small class="text-body-secondary">1 mins ago</small>
       </div>
     </div>
     <div class="card">
       <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
       </div>
       <div class="card-footer">
         <small class="text-body-secondary">2 mins ago</small>
       </div>
     </div>
     <div class="card">
       <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
       </div>
       <div class="card-footer">
         <small class="text-body-secondary">3 mins ago</small>
       </div>
     </div>
   </div>
  </body>
  </html>

Grid cards

  • Use the Bootstrap grid system and its .row-cols class to control the number of grid columns (wrapped around the cards) to display per row.

  • For example, here's .row-cols-1 to put cards in columns and .row-cols-md-2 to spread 4 cards of the same width across multiple rows from the middle breakpoint upwards.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="row row-cols-1 row-cols-md-2 g-4">
      <div class="col">
        <div class="card">
          <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          </div>
        </div>
      </div>
    </div>
  </body>
  </html>

If you change it to .row-cols-3 you will see the 4th card break.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="row row-cols-1 row-cols-sm-3 g-5">
      <div class="col">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content.A card is a flexible and extensible container for content</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          </div>
        </div>
      </div>
    </div>
  </body>
  </html>

When you want the same height to add .h-100 to the card. You want the same height by default, you can set $card-height: 100% in Sass.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="row row-cols-1 row-cols-sm-3 g-5">
      <div class="col">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content.A card is a flexible and extensible container for content</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          </div>
        </div>
      </div>
    </div>
  </body>
  </html>

Like card groups, card footers are automatically arranged.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Card</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="row row-cols-1 row-cols-sm-3 g-4">
      <div class="col">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          </div>
          <div class="card-footer">
            <small class="text-body-secondary">1 mins ago</small>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          </div>
          <div class="card-footer">
            <small class="text-body-secondary">2 mins ago</small>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
          </div>
          <div class="card-footer">
            <small class="text-body-secondary">3 mins ago</small>
          </div>
        </div>
      </div>
    </div>
  </body>
  </html>
Advertisements