Bootstrap 5 — Cards

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add cards with Bootstrap 5.

Cards

Cards are containers that can hold a variety of content.

It can include headers and footers.

Background colors and other display options can also be changed.

They replace the panels, wells, and thumbnails in Bootstrap 3.

For instance, we can add a card by writing:

<div class="card" style="width: 18rem;">  
  <img src="[http://placekitten.com/200/200](http://placekitten.com/200/200)" class="card-img-top" alt="cat">  
  <div class="card-body">  
    <h5 class="card-title">Card title</h5>  
    <p class="card-text">Phasellus iaculis sed orci sit amet tempus. In odio ipsum, porttitor vel odio id, pulvinar lacinia risus. Donec a fringilla lectus. Aenean vitae ante erat. Vestibulum pharetra tellus sit amet tortor eleifend rhoncus. Aliquam sagittis sem justo, vitae convallis erat facilisis eget. Nunc id viverra neque, ac bibendum nisl.</p>  
    <a href="#" class="btn btn-primary">Go somewhere</a>  
  </div>  
</div>

We have an image with the img-top class to place the image on top and make it flush with the edges.

Then we have the content within the div with the card-body class.

At the bottom, we have a link that looks like a button.

Content Types

We can place a variety of content on our cards.

Body

The main content is in the card body, which is denoted by the .card-body class.

For example, we can write:

<div class="card">  
  <div class="card-body">  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac ante enim. Donec ullamcorper feugiat dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur eget diam vulputate, commodo lectus non, luctus tortor. Nam rhoncus porta rutrum. Sed non leo at lorem vehicula aliquam id a libero. Aliquam aliquet augue suscipit vulputate vulputate. Aliquam suscipit mauris eu lectus porta fringilla id quis nulla.  
  </div>  
</div>

to add our card with some body text.

Titles, Text, and Links

Card titles can be added by adding an elemnt with the .card-title to a h* tag.

Subtitles can be added by adding the .card-subtitle class to a h* tag.

For example, we can write:

<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>  
    <div class="card-text">  
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac ante enim. Donec ullamcorper feugiat dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur eget diam vulputate, commodo lectus non, luctus tortor. Nam rhoncus porta rutrum. Sed non leo at lorem vehicula aliquam id a libero. Aliquam aliquet augue suscipit vulputate vulputate. Aliquam suscipit mauris eu lectus porta fringilla id quis nulla.  
    </div>  
  </div>  
</div>

We add our h5 and h6 tags with those classes to add the title and subtitle.

.card-text has the main text.

Images

Images can be added to cards.

The .card-img-top places the image on the top of the card.

For example, we can write:

<div class="card" style="width: 18rem;">  
  <img src="http://placekitten.com/200/200" class="card-img-top" alt="cat">  
  <div class="card-body">  
    <p class="card-text">Phasellus iaculis sed orci sit amet tempus. In odio ipsum, porttitor vel odio id, pulvinar lacinia risus. Donec a fringilla lectus. Aenean vitae ante erat. Vestibulum pharetra tellus sit amet tortor eleifend rhoncus. Aliquam sagittis sem justo, vitae convallis erat facilisis eget. Nunc id viverra neque, ac bibendum nisl.</p>  
  </div>  
</div>

to add an image above the text.

List Groups

List groups can be added to a card.

It’ll be flush to the edges.

For example, we can write:

<div class="card" style="width: 18rem;">  
  <ul class="list-group list-group-flush">  
    <li class="list-group-item">Lorem ipsum dolor sit amet,</li>  
    <li class="list-group-item">Ut ac ante enim</li>  
    <li class="list-group-item">Phasellus ullamcorper tellus vitae magna vulputate egestas.</li>  
  </ul>  
</div>

We have a ul with the .list-group and .list-group-flush classes to add the list group and make it flush to the card’s edges.

Also, we can add a header to it with the .card-header class:

<div class="card" style="width: 18rem;">  
  <div class="card-header">  
    Featured  
  </div>  
  <ul class="list-group list-group-flush">  
    <li class="list-group-item">Lorem ipsum dolor sit amet,</li>  
    <li class="list-group-item">Ut ac ante enim</li>  
    <li class="list-group-item">Phasellus ullamcorper tellus vitae magna vulputate egestas.</li>  
  </ul>  
</div>

The .card-header class will have a gray background color so we can see it easily.

Conclusion

We can add cards to hold content, including list groups, buttons, and images.