Bootstrap 5 is in alpha when this is written and it’s subject to change.
Bootstrap is a popular UI library for any JavaScript apps.
In this article, we’ll look at how to add card images and colors with Bootstrap 5.
Images
We can add images above or below the card content.
For example, we can write:
<div class="card mb-3">
<img src="http://placekitten.com/200/200" class="card-img-top" alt="cat">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
We have the .card-img-top to put the image at the top of the card and make it flush to the edges of the card.
Likewise, we can put the card image at the bottom by writing:
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img src="http://placekitten.com/200/200" class="card-img-bottom" alt="cat">
</div>
The .card-img-bottom does similar things to .card-img-top but it works if the image is below the text.
Image Overlays
Images can be added as the background of the card.
For instance, we can write:
<div class="card mb-3">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img src="http://placekitten.com/200/200" class="card-img" alt="cat">
</div>
We have the .card-img-overlay class to put the text over the image.
Horizontal
The image can be side by side with the text.
For example, we can write:
<div class="card mb-3">
<div class="row g-0">
<div class="col-md-4">
<img src="[http://placekitten.com/200/200](http://placekitten.com/200/200)" alt="cat">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
</div>
</div>
</div>
to add the image to the left of the text.
The .col-md-4 and .col-md-8 put the divs side by side.
Card Styles
Cards can have different styles.
We can change the background color with the bg-* classes.
For example, we can write:
<div class="card text-white bg-primary mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
</div>
<div class="card text-white bg-secondary mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
</div>
<div class="card text-white bg-success mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
</div>
<div class="card text-white bg-danger mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="card bg-warning mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
</div>
<div class="card text-body bg-info mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
</div>
</div>
<div class="card bg-light mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
</div>
</div>
<div class="card text-white bg-dark mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
</div>
to add the bg-* to change the backgrounds.
Border
Bootstrap 5 also provides the border-* classes to add outlined styles.
For example, we can write:
<div class="card border-primary mb-3">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
</div>
</div>
<div class="card border-secondary mb-3">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
</div>
</div>
<div class="card border-success mb-3">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success 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>
</div>
</div>
<div class="card border-danger mb-3">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
</div>
<div class="card border-warning mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
</div>
</div>
<div class="card border-info mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
</div>
<div class="card border-light mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
</div>
<div class="card border-dark mb-3">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
</div>
to add cards with the outlined styles instead of having a background color.
Conclusion
We can add background colors and borders within cards.
Images can also be positioned in different ways.