bootstrap
  1. bootstrap-card
PreviousNext

Bootstrap Cards

  • Bootstrap provides a flexible and extensible way to create cards, which are container components used to display content.
  • Cards are typically used to group related information, such as blog posts or product listings.

Syntax

Here is a basic syntax for creating a card in Bootstrap:

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <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="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Example

Here is an example of how to create a card with an image in Bootstrap

<div class="card" style="width: 18rem;">
    <img src="https://static.additionalsheet.com/images//others/lucy.jpg" class="card-img-top" alt="...">
    <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>
Try Playground

Header and footer

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

<div class="card text-center">
    <div class="card-header">
      Featured
    </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 class="card-footer text-body-secondary">
      2 days ago
    </div>
  </div>
Try Playground

Horizontal

Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. 

<div class="card mb-3">
    <div class="row g-0">
        <div class="col-md-3">
            <img src="https://static.additionalsheet.com/images//others/lucy.jpg" class="img-fluid rounded-start"
                alt="...">
        </div>
        <div class="col-md-9">
            <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>
                <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
            </div>
        </div>
    </div>
</div>
Try Playground

Explanation

In the code above, we used the following classes to create the card:

  • card: this is the main class that indicates that this is a card.
  • card-body: this is a container for all of the card's content.
  • card-title: this is a class applied to the card's title.
  • card-subtitle: this is a class applied to the card's subtitle.
  • card-img-top: this is a class applied to the image at the top of the card.
  • card-text: this is a class applied to the card's content.
  • card-link: this is a class applied to a link in the card.
  • btn: this is a class applied to a button.

Use

Bootstrap cards can be used to display content in a neat and organized way. They can be used in various scenarios, such as blog posts, product listings, portfolios, and more.

Important Points

  • Cards are container components used to display content.
  • Bootstrap provides flexible and extensible classes to create cards.
  • Cards are versatile and can be used in various scenarios.

Summary

Bootstrap cards are great tools to display content in a neat and organized way. By using Bootstrap's classes, you can easily create cards with various layout options, such as images, titles, subtitles, and buttons. Cards are versatile and can be used in different scenarios to display different types of information.

Button GroupsClose Button
Published on: