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" 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.

#software-development #web-development #programming #javascript #technology #bootstrap 5