Bootstrap 4 cards

Bootstrap Cards: These are the latest addition in the Bootstrap 4 version that offer modern card design that are quite popular in the mobile and desktop views. It is flexible and extensible container which then can be customized to match design accordingly. Here is simple design and layout for Bootstrap Card View.

Bootstrap 4 Cards Example

Bootstrap Card Layout: To start with Bootstrap Card structure you need to add specific .card class. Then as per design requirements one can add header, body and footer section with specific title, sub-title, links, button, images, color, deck and more html elements.

<div class="container">
  <h2 class="text-center">Bootstrap 4 Cards Example</h2>
<div class="card" style="width: 200px; margin: auto;">
  <img class="card-img-top" src="http://www.tutorialmines.net/wp-content/uploads/2017/03/demo-200.png" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Bootstrap Cards </h5>
    <p class="card-text">A Simple default presentation of Boostrap 4 Cards with image</p>
    <div class="text-center"><a href="http://www.tutorialmines.net/bootstrap-3-tutorial/" class="btn btn-primary">Tutorials</a></div>
  </div>
</div>
</div>

Bootstrap 4 Cards CSS

Default bootstrap 4 Cards CSS is given below with specification and values

.card{
  position:relative;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;  flex-direction:column;
  min-width:0;
  word-wrap:break-word;
  background-color:#fff;
  background-clip:border-box;
  border:1px solid rgba(0,0,0,.125);
  border-radius:.25rem}

Bootstrap Card Design

Bootstrap 4 Cards have the multi-purpose use for which we can add specific Header, Body, Footer, Title, Sub-title, links, text, group, deck, columns, image, position and templates that we are going to study one by one in this tutorial. Bootstrap Flip Card is also popular and that allows swift content change on click.

.card>hr{margin-right:0;margin-left:0}
.card>.list-group:first-child .list-group-item:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}
.card>.list-group:last-child .list-group-item:last-child{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}
.card-body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:1.25rem}
.card-title{margin-bottom:.75rem}
.card-subtitle{margin-top:-.375rem;margin-bottom:0}
.card-text:last-child{margin-bottom:0}
.card-link:hover{text-decoration:none}
.card-link+.card-link{margin-left:1.25rem}
.card-header{padding:.75rem 1.25rem;margin-bottom:0;background-color:rgba(0,0,0,.03);border-bottom:1px solid rgba(0,0,0,.125)}
.card-header:first-child{border-radius:calc(.25rem - 1px) calc(.25rem - 1px) 0 0}
.card-header+.list-group .list-group-item:first-child{border-top:0}
.card-footer{padding:.75rem 1.25rem;background-color:rgba(0,0,0,.03);border-top:1px solid rgba(0,0,0,.125)}
.card-footer:last-child{border-radius:0 0 calc(.25rem - 1px) calc(.25rem - 1px)}
.card-header-tabs{margin-right:-.625rem;margin-bottom:-.75rem;margin-left:-.625rem;border-bottom:0}
.card-header-pills{margin-right:-.625rem;margin-left:-.625rem}
.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:1.25rem}
.card-img{width:100%;border-radius:calc(.25rem - 1px)}
.card-img-top{width:100%;border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}
.card-img-bottom{width:100%;border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}
.card-deck{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.card-deck .card{margin-bottom:15px}

@media (min-width:576px)
{.card-deck{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;margin-right:-15px;margin-left:-15px}

.card-deck .card{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 0 0%;flex:1 0 0%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-right:15px;margin-bottom:0;margin-left:15px}}
.card-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.card-group>.card{margin-bottom:15px}
@media (min-width:576px){.card-group{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap}
.card-group>.card{-webkit-box-flex:1;-ms-flex:1 0 0%;flex:1 0 0%;margin-bottom:0}
.card-group>.card+.card{margin-left:0;border-left:0}
.card-group>.card:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
.card-group>.card:first-child .card-header,.card-group>.card:first-child .card-img-top{border-top-right-radius:0}
.card-group>.card:first-child .card-footer,.card-group>.card:first-child .card-img-bottom{border-bottom-right-radius:0}
.card-group>.card:last-child{border-top-left-radius:0;border-bottom-left-radius:0}
.card-group>.card:last-child .card-header,.card-group>.card:last-child .card-img-top{border-top-left-radius:0}
.card-group>.card:last-child .card-footer,.card-group>.card:last-child .card-img-bottom{border-bottom-left-radius:0}
.card-group>.card:only-child{border-radius:.25rem}
.card-group>.card:only-child .card-header,.card-group>.card:only-child .card-img-top{border-top-left-radius:.25rem;border-top-right-radius:.25rem}
.card-group>.card:only-child .card-footer,.card-group>.card:only-child .card-img-bottom{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}
.card-group>.card:not(:first-child):not(:last-child):not(:only-child){border-radius:0}
.card-group>.card:not(:first-child):not(:last-child):not(:only-child) 
.card-footer,.card-group>.card:not(:first-child):not(:last-child):not(:only-child) 
.card-header,.card-group>.card:not(:first-child):not(:last-child):not(:only-child) 
.card-img-bottom,.card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-img-top{border-radius:0}}
.card-columns .card{margin-bottom:.75rem}

@media (min-width:576px)
{.card-columns{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:1.25rem;-moz-column-gap:1.25rem;column-gap:1.25rem}
.card-columns .card{display:inline-block;width:100%}}

Bootstrap 4 Card Size

Bootstrap Cards do not have any specified width and will cover the 100% width of the container otherwise stated so you must give specific CSS values to get the desired result. So any sizing issue if arrives then you need to check with corresponding container in which they are places for which you must thorough information on using the grids.
Bootstrap 4 Cards Same Height:There arises one condition if you are looking to make all the cards achieve the same height then you must use the Bootstrap 4 flexbox model with specific CSS values accordingly. This is done by using Bootstrap 4 Cards in Group.

Bootstrap 4 Cards : Titles, text, and links

• You can add titles and subtitles in the Bootstrap Cards with specific .card-title and .card-subtitle class respectively in the corresponding heading tag (h1 to h6).
• Links also can be added with specific .card-link class to the anchor element (<a>) for a complete bootstrap card layout.
• .card-text is added to display default text in the cards and in Similar you can use all the basic HTML elements within Bootstrap cards to go with their layout.

Bootstrap 4 Card Image

Images are another important feature that are widely used in combination with Bootstrap 4 cards.

• Use .card-img-top class to place the image on top of the Cards and card-img-bottom for position on the bottom of the cards that will add specific CSS with border behavior to the whole layout.
• Image Caps can be added to the top or bottom of the Card images with class .text-muted that will impart small sizing behavior to the text for e.g. displaying last updated 3 mins ago.
• With class .card-img-overlay you can make images as background and beautify the whole layout.



Try it Editor

Bootstrap 4 Cards : Header and Footer

This Card layout with header and footer gives symmetrical design and view to the user hence used a lot of in modern websites layout. Check out the below example of Bootstrap 4 Cards with Header and Footer.

Bootstrap 4 Card layout

Now we will use Bootstrap 4 cards in layouts in multiple ways using following specific classes.

• card-group
• card-deck
• card-columns

All these three have some specific values which gives desired design character to the layout respectively and we are going to study them one by one.

Bootstrap 4 Card Group

In this structural layout Bootstrap Cards by placed within specific .card-group class. This .card-group has flexbox layout with equal layout columns and there is almost no gap between the corresponding cards. Check out the below example to know more.

Bootstrap 4 Card Deck

With .card-deck class you can place them with group alike with one different being there are marginal gaps between the corresponding Bootstrap cards. They also use flexbox model with same height attributes.

Bootstrap 4 Card Columns

In this specific .card-columns there are given default sizes based on the content inside. This random height has become a modern popular design known as Bootstrap Cards Masonry.

Bootstrap 4 Cards Grid

You can also use them with default Bootstrap grids for better performance always. Here is quick layout template for that structure.
Bootstrap 4 Cards Responsive :Although when placed inside the grids these card becomes responsive but there are specific CSS attributes that you might need to assign making them responsive like image responsive class.

Bootstrap 4 Cards Shadow

You can also give natural shadows to these cards which further enhances their bootstrap 4 card layout. Here we have some specific values that are applied to Bootstrap 4 Card design.

Bootstrap Card Template

Here is a sample for bootstrap business card template and you can use them for custom purpose accordingly.

Bootstrap Flip Card on Click

This modern design with different information on two sides are also popular and make way for interesting CSS animation layout. Here is quick example for this Bootstrap 4 Card rotation

Also check out our special post on Bootstrap Questions and Answers