Bootstrap 4 cards is a bordered box with some padding around its content. It provides a flexible and extensible content container with various variants and options. Bootstrap 4 cards include options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
Basic Card:
The .card class is used to create a basic card. Also, for placing content inside a class, you have to use the .card-body class. Below is an example of a basic card:
Example:
<div class="card">
<div class="card-body"> Card body with information </div>
You can also add a header and footer within a card. By using .card-header class, you can put the header of the card and by using .card-footer, add footer of the class.
Example:
<div class="card">
<div class="card-header"> Header of the card </div>
<div class="card-body"> Card body with information </div>
<div class="card-footer"> Footer of the card </div>
By using .card-title class, you can add card titles to any heading element. The .card-text class is used to remove the bottom margins for an <p> element if it is the last child in the card. And .card-link class is used to add a link to a card if it is required.
Example:
<div class="card">
<div class="card-body">
<h4 class="card-title"> title of card </h4>
<p class="card-text"> Some text </p>
<a href="#" class="card-link"> link of the card </a>
The classes .card-img-top or .card-img-bottom to a <img> tag is used to put an image to the top side or bottom side of the card as shown in the below example:
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok