How to work with Bootstrap 4 Cards

1162
0
09-18-2019 06:53 AM
MattZand
New Contributor
0 0 1,162

Bootstrap 4 is the latest version of Bootstrap at the time of writing. This version makes Bootstrap more powerful and easy to customize and use. One of amazing feature of Bootstrap 4 is Cards

Cards are a new component in Bootstrap 4 that replaces wells, panels, and thumbnails. A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

To create a card, we need to use the .card class. By default, card width is 100% of its parent container. Therefore, here we are using a grid system to control width. Also, by default, cards use dark text and assume a light background. Add .card- inverse for white text and specify the background-color and border- color values to go with it. Bootstrap 4 also provides a few classes that add a background color and border color to cards.

Here are 3 examples where cards are used:

Ex1:

<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle">Support card subtitle</h6>
</div>

Ex2:

<div class="card-block">
<p class="card-text">
Lorem ipsum dolor sit amet, at suscipit sodales eget ante ultricies mauris. Etiam dolor felis morbi nibh, mollit porttitor tempor, dignissim magna pellentesque dictumst bibendum dictum integer.
</p>
</div>

Ex 3:

<div class="card-block">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>

Here is a link for more examples of Bootstrap 4 Cards

Tags (1)