cards

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

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

Try it yourself

Example 2

<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

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

Featured

</div>

<h5 class="card-title">Card title</h5>

<p class="card-text">Some quick example text to build on the card title.</p>

</div>

2 days ago

</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

<h5 class="card-title">Card with List Group</h5>

<p class="card-text">This is a card with a list group.</p>

</div>

</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

<h5 class="card-title text-white">Card title</h5>

<p class="card-text text-white">This is some content over the image.</p>

</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

<h5 class="card-title">Card title</h5>

<p class="card-text">This is some text within a card.</p>

</div>

<h5 class="card-title">Card title</h5>

</div>

</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

<h5 class="card-title">Card title</h5>

<p class="card-text">Some quick example text to build on the card title.</p>

</div>

<h5 class="card-title">Card title</h5>

<p class="card-text">Some quick example text to build on the card title.</p>

</div>

<h5 class="card-title">Card title</h5>

<p class="card-text">Some quick example text to build on the card title.</p>

</div>

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.