Bootstrap Card #Part 6
In this article we are lean to make cards in Bootstrap.
Copy Bootstrap CDN link
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" >
Bootstrap Card Code
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Code Pocket</h5>
<h6 class="card-subtitle mb-2 text-muted">Code Leaning</h6>
<p class="card-text">Code Pocket is a website that you can learn HTML, CSS, Javascript and Bootstrap.</p>
<a href="#" class="card-link">Code Pocket</a>
<a href="#" class="card-link">Code Pocket</a>
</div>
</div>
Bootstrap card with image
<div class="card" style="width: 18rem;">
<div class="card-body">
<img class="card-img-top" src="http://surl.li/ccasa" alt="Card image cap">
<h5 class="card-title">Code Pocket</h5>
<h6 class="card-subtitle mb-2 text-muted">Code Leaning</h6>
<p class="card-text">Code Pocket is a website that you can learn HTML, CSS, Javascript and Bootstrap.</p>
<a href="#" class="card-link">Code Pocket</a>
<a href="#" class="card-link">Code Pocket</a>
</div>
</div>
Bootstrap Card with color
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Code Pocket</div>
<div class="card-body">
<h5 class="card-title">Hello learner</h5>
<p class="card-text">Code Pocket is a website that you can learn HTML, CSS, Javascript and Bootstrap.</p>
</div>
</div>
Bootstrap Card with border
<div class="card text-white border-info mb-3" style="max-width: 18rem;">
<div class="card-header text-dark">Code Pocket</div>
<div class="card-body text-info">
<h5 class="card-title">Hello learner</h5>
<p class="card-text">Code Pocket is a website that you can learn HTML, CSS, Javascript and Bootstrap.</p>
</div>
</div>