- In Bootstrap cards are flexible container which contains more then one HTML elements at a time
- We can easily customize the size of cards.
- We use Cards class to create a card in Bootstrap.
- To show image in the cards we use card-img-* class .
- To define body of card we use card-body class
- To describe the title we use card-title class.
- We can define text as well in in the cards by using card-text class.
<div class="card" style="width: 20rem;">
<img src="punia.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"> MY Card title</h5>
<p class="card-text">Code Family</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</div>
Content Type
Bootstrap cards support many contents like forms,list,linksetc.
Body
To define body of card we use .card-body class.
<div class="card">
<div class="card-body">
Code Family.
</div>
</div>
Text,Title and Links
In Bootstrap to define card title we have card-title class,for card text we have card-text class and to mention the links we use card-link class.
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Card Text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Image
In Bootstrap cards to show the image we use card-img-top class.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Code Family.</p>
</div>
</div>
List Groups
In Bootstrap cards we can also define list groups by using list-group class and also use flush list group.
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">JAVA</li>
<li class="list-group-item">PYTHON</li>
<li class="list-group-item">C++</li>
</ul>
</div>
Header and Footer
We can also define header and footer inside Bootstrap cards. It is optional to define header and footer in cards.
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Code Family</h5>
<p class="card-text">Be a part of codes family.</p>
<a href="#" class="btn btn-primary">submit</a>
</div>
</div>
Navigation
In Bootstrap cards we can also define Navigation according to our requirement.
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">Code Family text.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Image Overlays
In cards we can turn image in the background and write the text on the image
<div class="card bg-dark text-white">
<img src="..." class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">Eat, sleep code and repeat.</p>
<p class="card-text">Coding is a fun.</p>
</div>
</div>
Background and Colors
In Bootstrap cards we can set background colors as well according to our requirement.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Code family content.</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Code Family.</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Code Family.</p>
</div>
</div>
Border
We can also define borders of Bootstrap cards.
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Code family card text.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Code family text.</p>
</div>
</div>
Cards Layout
We can set card layout as well according to our requirement.
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Code Family text</p>
<p class="card-text"><small class="text-muted">Last updated 5 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Code Family text</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>