WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

Bootstrap 5 Cards

Previous Next

In Bootstrap 5, Cards are a flexible and extensible content container used to display a wide range of content, including text, images, links, and more. Cards can be customized with different styles and features.

Basic Card:

The most simple card contains a title and some content.

...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Example
<div class="card" style="width: 18rem;">
<img src="/images/whereisstuff/assets/150.png" 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 it yourself
Example 2
<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>
<img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
</div>
Try it yourself

Card with Header and Footer:

You can add a header and footer to a card.

Featured
...
Card title

Some quick example text to build on the card title.

2 days ago
Example
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<img src="/images/whereisstuff/assets/150.png" 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.</p>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
Try it yourself

Card with List Group:

Cards can contain a list group of items.

Card with List Group

This is a card with a list group.

  • Item 1
  • Item 2
  • Item 3
Example
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card with List Group</h5>
<p class="card-text">This is a card with a list group.</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>
Try it yourself

Card with Image Overlay:

You can add an overlay to a card image using the .card-img-overlay class.

...
Card title

This is some content over the image.

Example
<div class="card" style="width: 18rem;">
<img src="/images/whereisstuff/assets/150.png" class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title text-white">Card title</h5>
<p class="card-text text-white">This is some content over the image.</p>
</div>
</div>
Try it yourself

Card Columns:

For creating a grid of cards that adapt to different screen sizes, use card columns.

Note: card-columns works like CSS masonry, so it will adapt depending on the available screen size.

...
Card title

This is some text within a card.

Example
<div class="card-columns">
<div class="card">
<img src="/images/whereisstuff/assets/150.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is some text within a card.</p>
</div>
</div>
<div class="card">
<img src="/images/whereisstuff/assets/150.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is some more text.</p>
</div>
</div>
<!-- Add more cards as needed -->
</div>
Try it yourself

Card Decks:

To arrange multiple cards into a grid-like format, you can use .card-deck (in Bootstrap 4) or .row and .col (in Bootstrap 5).

...
Card title

Some quick example text to build on the card title.

...
Card title

Some quick example text to build on the card title.

...
Card title

Some quick example text to build on the card title.

Example
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="card">
<img src="/images/whereisstuff/assets/150.png" 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.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="card">
<img src="/images/whereisstuff/assets/150.png" 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.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="card">
<img src="/images/whereisstuff/assets/150.png" 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.</p>
</div>
</div>
</div>
</div>
Try it yourself

Previous Next