How bootstrap 4 extensible content containers or cards work

by Editorial Team

22 December 2023

Web Development

How bootstrap 4 extensible content containers or cards work

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.

Here is an example that demonstrates how to create a card and all of its subparts and styles. Place this code at the end of the container element of index.html:
<div class=”row”>
<div class=”col-md-4″>
<div class=”card”>

<div class=”card-header”> Featured
</div>
<div class=”card-block”>
<h4 class=”card-title”>Card title</h4>
<h6 class=”card-subtitle”>Support card subtitle</h6>
</div>

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

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

</div>
<div class=”col-md-4″>
<div class=”card”>
<img class=”card-img-top img-fluid” src=”https://placehold.it/800×400″ alt=”Card image cap”>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title=”Source Title”>Source Title</cite></footer>
</blockquote>
</div>
</div>
</div>

<div class=”col-md-4″>
<div class=”card”>
<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>

<div class=”card-img-overlay”>
<h4 class=”card-title”>Card title</h4>
<p class=”card-text”>Lorem ipsum dolor sit amet, at suscipit.</p>
</div>
</div>
</div>

<div class=”col-md-4″>
<div class=”card card-inverse” style=”background-color: black”>
<div class=”card-block”>
<h3 class=”card-title”>Card Title</h3>
<p class=”card-text”>Lorem ipsum dolor sit amet, at suscipit sodales eget ante ultricies mauris. </p>

</div>
</div>
</div>

<div class=”col-md-4″>
<div class=”card card-inverse card-primary”>
<div class=”card-block”>
<h3 class=”card-title”>Card Title</h3>
<p class=”card-text”>Lorem ipsum dolor sit amet, at suscipit sodales eget ante ultricies mauris.</p>
</div>
</div>
</div>

<div class=”col-md-4″>
<div class=”card card-inverse card-success”>
<div class=”card-block”>
<h3 class=”card-title”>Card Title</h3>
<p class=”card-text”>Lorem ipsum dolor sit amet, at suscipit sodales eget ante ultricies mauris.</p>
</div>
</div>
</div>

<div class=”col-md-4″>
<div class=”card card-inverse card-info”>
<div class=”card-block”>
<h3 class=”card-title”>Card Title</h3>
<p class=”card-text”>Lorem ipsum dolor sit amet, at suscipit sodales eget ante ultricies mauris.</p>
</div>
</div>
</div>

<div class=”col-md-4″>
<div class=”card card-inverse card-warning”>
<div class=”card-block”>
<h3 class=”card-title”>Card Title</h3>
<p class=”card-text”>Lorem ipsum dolor sit amet, at suscipit sodales eget ante ultricies mauris.</p>
</div>
</div>
</div>

<div class=”col-md-4″>
<div class=”card card-inverse card-danger”>
<div class=”card-block”>
<h3 class=”card-title”>Card Title</h3>
<p class=”card-text”>Lorem ipsum dolor sit amet, at suscipit sodales eget ante ultricies mauris.</p>
</div>
</div>
</div>
</div>
Here is how the code looks:

Here, I’ve created multiple cards so that it is easier to demonstrate all of their subparts and different styles.

Here is how the previous code works:

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.
In the first card, we have a header, which is created using the .card-header class. Then, we have a card block, inside which we have a title and subtitle. A card block is a part of a card that has padding. Whenever you need padding in any part of the card, simply use the .card-block class. A card title is created using .card-title, and a card subtitle is created using the .card- subtitle class. The .card-title and .card-subtitle classes simply give appropriate margins. Then, we simply have a responsive image. After that, we have a paragraph using the .card-text class. The .card-text class makes sure that the last child element doesn’t have any bottom margin. Then, we have two links with the .card-link class. .card-link applies a left margin to all .card-link classes from the second one. And finally, we have a card footer, which is created using .card-footer.
In the second card, we have a responsive image and then a block quote. We have added the .card-img-top class to the image, which adds a top- right and top-left border radius to the image. We have also added .card- blockquote to the block quote to remove the margin, padding, and left border from the block quote.
In the third card, we simply have some text and a responsive image. We have added the .card-img-bottom class to the responsive image, which adds a bottom-right and bottom-left border radius to the image.
The fourth card we created is for demonstrating card overlays. First, we added a responsive image with the .card-img class, which adds a border radius to all the corners. And then, we created an overlay using the .card- img-overlay class, which simply makes the position of the element absolute with some padding and no top, right, left, and bottom, thus putting the content on top of the card.
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. The fifth card is a demonstration of .card- inverse. Bootstrap 4 also provides a few classes that add a background color and border color to cards. These classes are demonstrated in the last five cards.

Card Groups
Card groups let you render cards as a single, attached element with equal width and height columns. Card groups only apply to screen sizes greater than 544px.
If you need a set of same-sized cards that aren’t attached to one another, then use card decks instead of card groups. Card decks only apply to screen sizes greater than 544px.
Finally, card columns let you organize cards into Masonry-like columns. Card columns only apply to screen sizes greater than 544px.
Here is a code example of card groups, decks, and columns. Place it at the end of the container element of index.html:
<div class=”card-group”>
<div class=”card”>
<img class=”card-img-top img-fluid” src=”https://placehold.it/800×400″ alt=”Card image cap”>
<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>
</div>
<div class=”card”>
<img class=”card-img-top img-fluid” src=”https://placehold.it/800×400″ alt=”Card image cap”>
</div>
<div class=”card”>
<img class=”card-img-top img-fluid” src=”https://placehold.it/800×400″ alt=”Card image cap”>
</div>
<div class=”card”>
<img class=”card-img-top img-fluid” src=”https://placehold.it/800×400″ alt=”Card image cap”>
</div>
<div class=”card”>
<img class=”card-img-top img-fluid” src=”https://placehold.it/800×400″ alt=”Card image cap”>
</div>
<div class=”card”>

<div class=”card”>
<img class=”card-img-top img-fluid” src=”https://placehold.it/800×400″ alt=”Card image cap”>
<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>
</div>
<div class=”card”>
<img class=”card-img-top img-fluid” src=”https://placehold.it/800×400″ alt=”Card image cap”>
</div>
<div class=”card”>
<img class=”card-img-top img-fluid” src=”https://placehold.it/800×400″ alt=”Card image cap”>
</div>
<div class=”card”>
<img class=”card-img-top img-fluid” src=”https://placehold.it/800×400″ alt=”Card image cap”>
</div>
<div class=”card”>
<img class=”card-img-top img-fluid” src=”https://placehold.it/800×400″ alt=”Card image cap”>
</div>
<div class=”card”>

<br>
<div class=”card-columns”>
<div class=”card”>
<img class=”card-img-top img-fluid” src=”https://placehold.it/800×400″ alt=”Card image cap”>
<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>
</div>
<div class=”card”>
<img class=”card-img-top img-fluid” src=”https://placehold.it/800×400″ alt=”Card image cap”>
</div>
<div class=”card”>
<img class=”card-img-top img-fluid” src=”https://placehold.it/800×400″ alt=”Card image cap”>
</div>
<div class=”card”>
<img class=”card-img-top img-fluid” src=”https://placehold.it/800×400″ alt=”Card image cap”>
</div>
<div class=”card”>
<img class=”card-img-top img-fluid” src=”https://placehold.it/800×400″ alt=”Card image cap”>
</div>
<div class=”card”>
<img class=”card-img-top img-fluid” src=”https://placehold.it/800×400″ alt=”Card image cap”>
</div>
</div>
Here is the output of the code:

As you can see, we have used the .card-group class to create a class group. We have used .card-deck-wrapper and .card-deck to create a card deck and, finally, .card-columns to organize cards into Masonry-like columns.

Here are related articles if you wish to learn more advance topics for web development:

Best practices for securing and scaling Node.JS applications
Comprehensive overview of Angular 2 architecture and features
Comprehensive guide for migration from monolithic to microservices architecture
Comprehensive overview of Bootstrap 4 features for user interface customizations
Intro to functional reactive programming for advance js web development
Using advance js and webrtc for cross browser communications in real time
Intro to real-time bidirectional communications between browsers and webSocket servers

Junior or senior web developers can also explore career opportunities around blockchain development by reading below articles:

Blockchain Developer Guide- Comprehensive Blockchain Ethereum Developer Guide from Beginner to Advance Level
Blockchain Developer Guide- Comprehensive Blockchain Hyperledger Developer Guide from Beginner to Advance Level