Bootstrap - Cards

The extensive and adaptable Card component in Bootstrap 5 is a flexible container that lets you create content blocks with different designs, including buttons, text, photos, and links. Because of their great degree of customization, cards can be used to show a variety of content, including product descriptions and user profiles.

We'll go over the fundamental architecture, application, and customization possibilities of Bootstrap 5 Cards in-depth in this blog article.

1. A card's basic structure

Typically, a Bootstrap 5 card includes the following components:

Card Container (.card): The outer container of the card.

Card Body (.card-body): The main content area within the card.

Card Title (.card-title) and Card Text (.card-text): Elements to display text inside the card.

Card Image (.card-img-top): An optional image at the top of the card.

Card Footer (.card-footer): Optional footer section at the bottom of the card.

Example of a Basic Card:

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

<p class="card-text">This is a simple card example with text and a button.</p>

<a href="#" class="btn btn-primary">Go somewhere</a>

</div>

In this example:

The card contains an image at the top.

The card body contains a title, text, and a button.

2. Card Content Options

Bootstrap 5 Cards allow you to add various types of content inside them, such as images, text, lists, and buttons.

2.1 Card Image

You can add an image to the card using the .card-img-top class, which ensures that the image fits nicely within the card's top section.

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

<p class="card-text">This is an image card example.</p>

</div>

2.2 List Groups in Cards

To create a list inside a card, you can use the .list-group class along with .list-group-item.

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

</div>

</ul>

</div>

2.3 Card Footer

The .card-footer class can be used to create a footer at the bottom of the card.

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

<p class="card-text">This card has a footer.</p>

</div>

Footer content

</div>

3. Card Layouts and Grid Integration

Bootstrap 5 Cards work well with the grid system, allowing you to create responsive card layouts.

3.1 Card Columns

To display multiple cards in a responsive grid, you can use the Bootstrap grid system. For example, use .col-md-* to control the column width for each card.

<p class="card-text">Content for card 1.</p>

</div>

<p class="card-text">Content for card 2.</p>

</div>

<p class="card-text">Content for card 3.</p>

</div>

3.2 Horizontal Cards

To create a horizontal card layout, where the image and text are displayed side by side, use the .row and .col classes.

</div>

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

<p class="card-text">This is an example of a horizontal card layout.</p>

</div>

4. Card Variations and Customization

4.1 Background Colors

Bootstrap 5 allows you to change the background color of a card using utility classes like .bg-primary, .bg-secondary, .bg-success, etc.

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

<p class="card-text">This card has a primary background color.</p>

</div>

4.2 Card Header and Border

Add headers to your cards using the .card-header class. You can also style the border with classes like .border-primary.

<div class="card-header">Header</div>

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

<p class="card-text">This card has a primary border and header.</p>

</div>

4.3 Card Groups

You can group multiple cards together using the .card-group class. This ensures that cards stay together and maintain consistent height.

<p class="card-text">Content for card 1.</p>

</div>

<p class="card-text">Content for card 2.</p>

</div>

<p class="card-text">Content for card 3.</p>

</div>

5. Conclusion

Extremely adaptable, Bootstrap 5 Cards offers a flexible method for arranging and showcasing content in an orderly and eye-catching fashion. Cards allow you the ability to display information understandably while keeping a responsive layout, whether you're creating basic content blocks or more intricate interactive pieces.

You can modify cards to meet your unique design requirements with a variety of modification choices, including headers, footers, background colors, borders, and groups. Make use of them to improve your web apps that use Bootstrap!