Cards are replacing the traditional thumbnails, panels, etc. It is a significant way of showing images, links, heading, and content altogether in a single container. It is an attractive and arranged component in any website. Make it more eye-catching by using background colors, customizing the footer, etc.
Boostrap Rev brings you the all-new card website template made from one of the popular frameworks, Boostrap.
card class denotes the cards.
card-shadow class gives shadow to the card.
card-has-footer gives a footer section to the card. Here links are added.
The card-img-top makes the image appear at the top.
card-body class is to show the content below the image under the padding.
card-title is to give a title to it.
One can use the card-text class to write any text in the card-body.
The designers can modify the code after copying it from the editor.
It is a simple card layout with an image, text, and a link. The shadow effect is shown in this layout to make it more realistic and attractive. To give the shadow effect, use the card-shadow class.
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card card-shadow">
<img src="https://bootstraprev.com/img/blog/admin.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-shadow">
<img src="https://bootstraprev.com/img/blog/admin.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-shadow">
<img src="https://bootstraprev.com/img/blog/admin.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
An exquisite card layout with minimal detailing, this card design is a classic design highly used by designers. One, Two, and Three are denoting the list items.
Here, card-has-footer is used to give a footer section to it.
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card card-has-footer">
<img src="https://bootstraprev.com/img/blog/admin.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="card card-has-footer">
<img src="https://bootstraprev.com/img/blog/admin.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="card card-has-footer">
<img src="https://bootstraprev.com/img/blog/admin.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
</div>
</div>
</div>
It is the same design as the above one. The only difference lies in the list items. In this design, the list items appear before the card-body class. Therefore, it emerges just after the image of the card. It is also one of the most used cards by designers.
Just copy the code and paste it to your code editor. Modify it to make it more catchy.
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card card-has-footer">
<img src="https://bootstraprev.com/blog/admin.jpg" class="card-img-top" alt="...">
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
<div class="card-body">
<h5 class="card-title">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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-has-footer">
<img src="https://bootstraprev.com/blog/admin.jpg" class="card-img-top" alt="...">
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
<div class="card-body">
<h5 class="card-title">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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-has-footer">
<img src="https://bootstraprev.com/blog/admin.jpg" class="card-img-top" alt="...">
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
<div class="card-body">
<h5 class="card-title">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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>