Bootstrap 4 introduced a new component called cards. The components like panels, thumbnails and wells in Bootstrap 3 were removed and made as a single component called cards in Bootstrap 4. Cards are mobile friendly elements and became most popular with the use in Google Material Design. In this tutorial let us discuss how to create various cards in real-time using the latest Bootstrap 5.
You can download the examples used in this tutorial here.
Bootstrap 5 Cards Tutorial
This tutorial covers the following chapters:
- What is card component?
- Basic Bootstrap 5 card
- Sizing of cards
- Card with subtitle and links
- Aligning text
- Adding header and footer
- Using navigation tabs
- Image at bottom of the card
- Card with image overlay
- Inverted or black card
- Cards with background colors
- Outline cards
- Card layouts
1. What is Cards in Bootstrap?
Cards are fluid container contains header, footer and content. The content part can have different type of elements like title, description, image, buttons, etc. With mix and match of different elements, there are lots of possibilities to create different types of cards. We cover cards with basic and most appealing look.
2. Basic Cards
The basic card component will have an image, title, description and a button. This is the most generic form of using cards on blogs and page layout designs.
The code snippet for creating the basic card is given below with complete starter template:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!-- Basic Card with Image, Title and Description -->
<div class="card" style="width:20rem;">
<img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is basic card with image on top, title, description and button.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<!-- Bootstrap 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>Ideally there is no need of scripts for cards as long as only simple elements are used within card block. As you have noticed there are lot of CSS classes are used to create a card.
- The card should be identified with “.card” class wrapped with a <div> tag.
- The image is an optional element in the card. In order to include the image on top you should add a class “.card-img-top”. The additional class “.img- fluid” is added to ensure the image is responsive and fit into the container width.
- The card can have multiple card blocks wrapped inside a separate <div> tag with a CSS class “.card-body”. Each card block contains the content for that block like title, description, etc.
- In our example w have used <h4> heading for title with the class “.card-title”. After title we have short description using <p> tag with the class “.card- text”. Finally we have a button identified with normal Bootstrap button class.
Remember the “.card” and “.card-body” are sufficient to have a card with any type of content inside the block.
3. Sizing of Card Component
The card component by default is fluid and spread to the full width of the container. In the above basic card example, we have used “style=”width:20rem;”” to limit the width to 20rem. You can use different ways to restrict the width.
- Using inline style like in the above example.
- Using grid layout.
- Using utility classes to adjust width and height.
In all our examples, we will use inline style to make the card to a specific width.
4. Card With Subtitle and Links
Let us start modifying the basic card to have a subtitle and links instead of button. The subtitle can be added using “.card-subtitle” class and bottom margin is to be added to create required gap between title and subtitle. Links are create using standard HTML anchor tags.
<div class="card" style="width:20rem;">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
<p class="card-text">This card has no image but has subtitle and two links instead of button.</p>
<a href="#" class="card-link">Link 1</a>
<a href="#" class="card-link">Link 2</a>
</div>
</div>This should produce the following result on the browser:
5. Card With Text Alignment
By default the card elements are aligned to left which can be changed to right and center using “.text-right” and “.text-center” classes respectively to the “.card-block” class.
<!-- Card with Center Text Alignment -->
<div class="card" style="width:20rem;">
<div class="card-body text-center">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card with center text alignment.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<!-- Card with Right Text Alignment -->
<div class="card" style="width:20rem;">
<div class="card-body text-right">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card with right text alignment.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>The final result will look like below:
The image element is removed in the above card example to showcase the text alignment.
6. Adding Header and Footer
What about adding header and footer to the card similar to the panel component in Bootstrap 3? Yes, you can add header and footer using “.card-header” and “.card-footer” classes like below:
<div class="card" style="width:20rem;">
<div class="card-header">
This is a Header
</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card component with header and footer.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<div class="card-footer">
This is a Footer
</div>
</div>Remember to add header or footer classes to separate <div> tags before and after the “.card-block” section. The output of the card with header and footer is given below:
7. Using Navigation Tabs in Card
The header part of the card can use default navigation component to convert the card like a horizontal tab like below.
The code for the card with navigation is given below:
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item" style="list-style-type: none;">
<a class="nav-link active" href="#">Tab1</a>
</li>
<li class="nav-item" style="list-style-type: none;">
<a class="nav-link" href="#">Tab2</a>
</li>
<li class="nav-item" style="list-style-type: none;">
<a class="nav-link disabled" href="#">Tab3</a>
</li>
</ul>
</div>
<div class="card-body">
<h4 class="card-title">This is a title for tab 1</h4>
<p class="card-text">This card uses navigation with default navigation components.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>8. Image at Bottom
The default card will have the image on top of the card as shown in the basic card example. You can move the image down to the card using “.card-img-bottom” and move the <img> tag below the card block.
<div class="card" style="width:20rem;">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is Bootstrap 5 card with image aligned bottom of the card component.</p>
<p class="card-text"><small class="text-muted">Enter some text here...</small></p>
</div>
<img class="card-img-bottom" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card Image Down">
</div>The card with the image down will look like below:
9. Card with Image Overlay
Instead of having the image up or down you can add all text elements on top of the image like an overlay like below:
<div class="card bg-dark text-white" style="width:20rem;">
<img class="card-img" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image">
<div class="card-img-overlay">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Here is a short description to explain what this card is about.</p>
<p class="card-text"><small class="text-muted">Enter some text here...</small></p>
</div>
</div>The “.card-img-overlay” class is used within <div> tag which covers all text elements to overlay them on the image. Here we have used “.card-inverse” to convert the text to light color as we have used dark background image. You can read more about inverted card in the next example.
10. Inverted or Black Card
By default the text elements of a card uses dark colors assuming the background color is of light color (generally white). The text color can be easily inverted into a light color using “.text-white” class. Remember this will only inverse the text colors and you should declare the background manually to a dark color using “.bg-dark” class in order to ensure the readability.
Below is the code for inverted card with black background color declared using inline style.
<div class="card bg-dark text-white mb-3" style="background-color: #333;">
<div class="card-body">
<h3 class="card-title">Special title treatment</h3>
<p class="card-text">This is a card with inverse color and background is set as black.</p>
<a href="#" class="btn btn-primary">Go somehwere</a>
</div>
</div>The inverted card should look like below:
11. Card with Different Background Colors
Looking at the cards with white background will be boring. Use any of the background utility classes to add colorful background to the card component. You can change to one of the background colors like primary, secondary, success, light, dark, warning, info or danger. Below is the card with header and different background colors.
<div class="card text-white bg-primary mb-3">
<div class="card-header">Primary</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with primary color background.</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3">
<div class="card-header">Secondary</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with secondary color background.</p>
</div>
</div>
<div class="card text-white bg-success mb-3">
<div class="card-header">Success</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with green color background.</p>
</div>
</div>
<div class="card text-white bg-info mb-3">
<div class="card-header">Info</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with blue color background.</p>
</div>
</div>
<div class="card text-white bg-warning mb-3 text-center">
<div class="card-header">Warning</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with yellow color background and aligned center.</p>
</div>
</div>
<div class="card text-white bg-danger mb-3 text-center">
<div class="card-header">Danger</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with red color background and aligned center.</p>
</div>
</div>
<div class="card bg-light mb-3 text-center">
<div class="card-header">Light</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with light color background and aligned center.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3 text-center">
<div class="card-header">Dark</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with dark color background and aligned center.</p>
</div>
</div>Remember to include “.text-white” class as all these backgrounds are darker color which needs the text to be in lighter color.
Cards with different background colors are shown below:
12. Outline Cards
The outline cards will have plain white background with different border colors using “.card-outline-primary“,”.card-outline-secondary“,”.card-outline-success“,”.card-outline-info“,”.card-outline-warning” and”.card-outline-danger” classes.
<div class="card border-primary mb-3 text-center">
<div class="card-header">Primary Border</div>
<div class="card-body text-primary">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with primary color background.</p>
</div>
</div>
<div class="card border-secondary mb-3 text-center">
<div class="card-header">Secondary Border</div>
<div class="card-body text-secondary">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with primary color background.</p>
</div>
</div>
<div class="card border-light mb-3 text-center">
<div class="card-header">Light Border</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with primary color background.</p>
</div>
</div>
<div class="card border-dark mb-3 text-center">
<div class="card-header">Dark Border</div>
<div class="card-body text-dark">
<p>This is a card text paragraph with secondary color background without title.</p>
<footer>Quote by <cite title="Source Title">Someone said</cite></footer>
</div>
</div>
<div class="card border-success mb-3 text-center">
<div class="card-header">Success Border</div>
<div class="card-body text-success">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with green color background.</p>
</div>
</div>
<div class="card border-info mb-3 text-center">
<div class="card-header">Info Border</div>
<div class="card-body text-info">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with blue color background.</p>
</div>
</div>
<div class="card border-warning mb-3 text-center">
<div class="card-header">Warning Border</div>
<div class="card-body text-warning">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with yellow color background.</p>
</div>
</div>
<div class="card border-danger text-center">
<div class="card-header">Danger Border</div>
<div class="card-body text-danger">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with red color background.</p>
</div>
</div>Outline cards will look like below:
13. Bootstrap 5 Card Layouts
All the above examples deal with creating card as a single component. Bootstrap also offers three classes to create card layout which is more suitable for blog layouts.
- card-group
- card-deck
- card-columns
We will discuss these card layout classes in our next tutorial.
Leave a Reply
Your email is safe with us.