In bootstrap, the card is a flexible content container box to hold a wide variety of other bootstrap components. The bootstrap card has included the options for headers, footers, background colors, content, etc. for better display.
The card component has been introduced in bootstrap 4 and it replaces the old panels, wells and thumbnails components in bootstrap 3.
In bootstrap, you can create a card by adding .card class to <div> element and wrap the card content inside of <div> element with .card-body class like as shown below.
The above example will return the result like as shown below.
By adding .card-title or .card-subtitle class to any heading (<h*>) element, you can create card title and subtitle in bootstrap card. To remove the bottom margin for the text, you can add .card-text class to the required elements.
Same way, you can add the links to bootstrap card by adding .card-link to <a> element. The .card-link will place the links next to each other.
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle text-muted">Card subtitle</h6>
<p class="card-text">Welcome to Tutlane. Its card sample text.</p>
<a href="#" class="card-link">Link1</a>
<a href="#" class="card-link">Link2</a>
</div>
</div>
The above example will return the result like as shown below.
By using .card-header and .card-footer classes, you can create the header and footer for the card in bootstrap.
<div class="card">
<div class="card-header">Card Header</div>
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Welcome to Tutlane. Its card sample text.</p>
<a href="#" class="btn btn-primary">View Profile</a>
</div>
<div class="card-footer text-muted">1 day ago</div>
</div>
The above example will return the result like a shown below.
In bootstrap, by using text and background contextual classes (.bg-primary, .bg-secondary, .bg-success, etc.) we can customize the style of cards based on our requirements.
<div class="row">
<div class="col-sm-4">
<div class="card text-white bg-primary mb-4">
<div class="card-body">
<h5 class="card-title">Suresh Dasari</h5>
<p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card text-white bg-secondary mb-4">
<div class="card-body">
<h5 class="card-title">Suresh Dasari</h5>
<p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card text-white bg-info mb-4">
<div class="card-body">
<h5 class="card-title">Suresh Dasari</h5>
<p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>
</div>
</div>
</div>
</div>
The above example will return the result like as shown below.
Same way, we can customize the border color of cards using border utility classes such as .border-primary, .border-secondary, etc. based on our requirements.
<div class="row">
<div class="col-sm-4">
<div class="card text-primary border-primary mb-4">
<div class="card-body">
<h5 class="card-title">Suresh Dasari</h5>
<p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card text-secondary border-secondary mb-4">
<div class="card-body">
<h5 class="card-title">Suresh Dasari</h5>
<p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card text-success border-success mb-4">
<div class="card-body">
<h5 class="card-title">Suresh Dasari</h5>
<p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>
</div>
</div>
</div>
</div>
The above example will return the result like as shown below.
In bootstrap, you can add the images at the top or bottom of card by adding .card-img-top or .card-img-bottom to <img> element. The .card-img-top class will place the image at the top of card and .card-img-bottom class will place image at the bottom of card in bootstrap.
<!--Image at the top-->
<div class="card" style="width: 14rem;">
<img class="card-img-top" src="/images/defaultimg.png" alt="Suresh Dasari Card">
<div class="card-body text-center">
<h5 class="card-title">Suresh Dasari</h5>
<p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>
<a href="#" class="btn btn-primary">View Profile</a>
</div>
</div>
<!--Image at the bottom-->
<div class="card" style="width: 14rem;">
<div class="card-body text-center">
<h5 class="card-title">Suresh Dasari</h5>
<p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>
<a href="#" class="btn btn-primary">View Profile</a>
</div>
<img class="card-img-bottom" src="/images/defaultimg.png" alt="Suresh Dasari Card">
</div>
If you observe the above example, we added the image outside of .card-body to span the entire width of card. The above example will return the result like as shown below.
By replacing .card-body class with .card-img-overlay, you can turn the image into a card background and overlay your card text.
<div class="card text-muted" style="width: 20rem;">
<img class="card-img" src="/images/defaultimg.png" alt="Suresh Dasari Card">
<div class="card-img-overlay">
<h5 class="card-title">Suresh Dasari</h5>
<p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>
<a href="#" class="btn btn-primary">View Profile</a>
</div>
</div>
The above example will return the result like as shown below.
In bootstrap, we can create the responsive and mobile friendly horizontal card by placing the image and card content side by side using grid and utility classes.
<div class="card" style="width: 500px;">
<div class="row no-gutters">
<div class="col-sm-5">
<img class="card-img" src="/images/defaultimg.png" alt="Suresh Dasari Card">
</div>
<div class="col-sm-7">
<div class="card-body">
<h5 class="card-title">Suresh Dasari</h5>
<p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>
<a href="#" class="btn btn-primary">View Profile</a>
</div>
</div>
</div>
</div>
The above example will return the result like as shown below.
In bootstrap, the .card-group class is useful to arrange a series of cards as single, attached element with equal width and height columns.
<div class="card-group">
<div class="card">
<img class="card-img-top" src="/images/defaultimg.png" alt="Suresh Dasari Card">
<div class="card-body">
<h5 class="card-title">Suresh Dasari</h5>
<p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>
</div>
<div class="card-footer">
<small class="text-muted">3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="/images/defaultimg.png" alt="Suresh Dasari Card">
<div class="card-body">
<h5 class="card-title">Suresh Dasari</h5>
<p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>
</div>
<div class="card-footer">
<small class="text-muted">3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="/images/defaultimg.png" alt="Suresh Dasari Card">
<div class="card-body">
<h5 class="card-title">Suresh Dasari</h5>
<p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>
</div>
<div class="card-footer">
<small class="text-muted">3 mins ago</small>
</div>
</div>
</div>
If you observe the above example, we are using card groups with footers so the content will line up automatically. The above example will return the result like as shown below.
If you observe the above result, the .card-group class has rendered the cards as a single, attached element with equal width and columns.
In bootstrap, the .card-deck class is useful to render the cards as separate with equal width and height.
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="/images/defaultimg.png" alt="Suresh Dasari Card">
<div class="card-body">
<h5 class="card-title">Suresh Dasari</h5>
<p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>
</div>
<div class="card-footer">
<small class="text-muted">3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="/images/defaultimg.png" alt="Suresh Dasari Card">
<div class="card-body">
<h5 class="card-title">Suresh Dasari</h5>
<p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>
</div>
<div class="card-footer">
<small class="text-muted">3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="/images/defaultimg.png" alt="Suresh Dasari Card">
<div class="card-body">
<h5 class="card-title">Suresh Dasari</h5>
<p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>
</div>
<div class="card-footer">
<small class="text-muted">3 mins ago</small>
</div>
</div>
</div>
The above example will return the result like as shown below.
If you observe the above result, the .card-deck class rendered the cards with equal width and height and those are not attached to one another.
In bootstrap, the .card-columns class is useful to create the masonry like grid of cards and it will automatically adjust the cards based on the layout.
<div class="card-columns">
<div class="card">
<img class="card-img-top" src="/images/defaultimg.png" alt="Suresh Dasari Card">
<div class="card-body">
<h5 class="card-title">Suresh Dasari</h5>
<p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="card-title">Suresh Dasari</h5>
</div>
<div class="card-body">
<p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>
</div>
<div class="card-footer">
<small class="text-muted">3 mins ago</small>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Suresh Dasari</h5>
<p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Suresh Dasari</h5>
<p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Suresh Dasari</h5>
<p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>
</div>
<div class="card-footer">
<small class="text-muted">3 mins ago</small>
</div>
</div>
</div>
The above example will return the result like as shown below.
This is how we can use the cards in our bootstrap applications to create a flexible content container box to hold the wide variety of other components based on our requirements.