In Bootstrap 4 Cards Tutorial With Example, you will learn how to use cards in Bootstrap 4. For those familiar with Bootstrap 3, cards replace the old thumbnails, wells, and panels. Cards add a flexible and extensible container for displaying content in a different of ways.

Bootstrap 4 Cards Tutorial With Example

Cards are bordered boxes with a little of padding around the content inside them, which can be used to display a specific set of information.  A card is a container with styling that you can place virtually any content into. There are many styling options are available such as alignment, padding, colors, headings, and more.

#1: Bootstrap 4 Cards

A card in Bootstrap 4 is a bordered box with some padding around its content. The content part can have a different type of elements like title, description, buttons, image etc. There are many possibilities to make different types of cards.

To create a basic Bootstrap 4 card, you need to create the <div> container with the class .card and inside  another <div> container with the class of .card-body.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Cards Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Basic Card</h2>
  <div class="card">
    <div class="card-body">Card</div>
  </div>
</div>
</body>
</html>

The example of Bootstrap cards will look like below screenshot.

Bootstrap 4 Cards Example

#2: Bootstrap 4 Cards Header and Footer

You have to create the <div> container with the .card-header or .card-footer class. The .card-header class adds a heading to the card and the .card-footer class adds a footer to the card.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Cards Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Card Header and Footer</h2>
  <div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">Content</div> 
    <div class="card-footer">Footer</div>
  </div>
</div>
</body>
</html>

The example of Bootstrap cards header and footer will look like below screenshot.

Bootstrap 4 Cards Tutorial

#3: Bootstrap 4 Contextual Cards

Bootstrap 4 cards may be combined with contextual classes add color to them. To change the style of the card, you must add the contextual class to an outer container with the .card class.

Here are eight contextual classes that cards can be used with:

  • .bg-primary
  • .bg-secondary
  • .bg-info
  • .bg-success
  • .bg-danger
  • .bg-warning
  • .bg-light
  • .bg-dark

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Cards Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Cards with Contextual Classes</h2>
  <div class="card bg-primary">
    <div class="card-body">Primary card</div>
  </div>
  <br>
  <div class="card bg-secondary">
    <div class="card-body">Secondary card</div>
  </div>
  <br>
  <div class="card bg-info">
    <div class="card-body">Info card</div>
  </div>
  <br>
  <div class="card bg-success">
    <div class="card-body">Success card</div>
  </div>
  <br>
  <div class="card bg-danger">
    <div class="card-body">Danger card</div>
  </div>
  <br>
  <div class="card bg-warning">
    <div class="card-body">Warning card</div>
  </div>
  <br>
  <div class="card bg-light">
    <div class="card-body">Light card</div>
  </div>
  <div class="card bg-dark">
    <div class="card-body">Dark card</div>
  </div>
  <br>
</div>
</body>
</html>

The example of Bootstrap Contextual cards will look like below screenshot.

Bootstrap 4 Contextual Classes with Cards Example

#4: Bootstrap 4 Cards Title, Text and Links

There are particular classes for styling titles, text and links inside Bootstrap 4 cards. Use .card-title to add card titles to any heading element. You can also add subtitle using .card-subtitle class. A .card-text class is used to remove bottom margins for the <p> element if it is a last child inside .card-body. Links in cards are styled by adding the .card-link class to <a> elements, which appends a hover effect to the link and colors the font blue.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Cards Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Card titles,subtitle, text, and links</h2>
<div class="card">
    <div class="card-body">
      <h3 class="card-title">Card Title</h3>
      <h6 class="card-subtitle mb-2 text-muted">Card SubTitle</h6>
      <p class="card-text">Card Text</p>
      <a href="#" class="card-link">Link 1</a>
      <a href="#" class="card-link">Link 2</a>
    </div>
  </div>
</div>
</body>
</html>

The example of Bootstrap cards title, text and link will look like below screenshot.

Bootstrap 4 Cards title,text and link Example

#5: Bootstrap 4 Cards Image

You can also use specific classes for displaying images in cards. There are two classes for this purpose .card-img-top and .card-img-bottom. By default, the card will have the image on top of the card The . card-img-top class place an image on the top of the card, and card-img-bottom class places an image on the bottom of the card. Both classes have to be used with the <img> tag inside a card to work properly.

Note that we have added an image outside of a .card-body to span the entire width.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Cards Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<h2>Card Images</h2>
  <div class="card" style="width:300px">
    <img class="card-img-top" src="/images/federer.jpg" alt="Card image" style="width:100%">
    <div class="card-body">
      <h4 class="card-title">Roger Federer</h4>
      <p class="card-text">Roger Federer is a Swiss professional tennis player.</p>
      <a href="#" class="btn btn-primary">Following</a>
    </div>
  </div>
  <br>
  <div class="card" style="width:300px">
    <div class="card-body">
      <h4 class="card-title">Roger Federer</h4>
      <p class="card-text">Roger Federer is a Swiss professional tennis player.</p>
      <a href="#" class="btn btn-primary">Following</a>
    </div>
    <img class="card-img-bottom" src="/images/federer.jpg" alt="Card image" style="width:100%">
  </div>
</div>
</body>
</html>

The example of Bootstrap cards images will look like below screenshot.

Bootstrap 4 Cards Image Example

#6: Bootstrap 4 Card Image Overlays

You can apply the background image to a card, then have text appear over the top. Use the .card-img-overlay to add text on top of the image.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Cards Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<h2>Card Image Overlays</h2>
  <div class="card" style="width: 300px;">
      <img src="/images/federer.jpg" alt="Picture" class="card-img-top">
      <div class="card-img-overlay text-white">
        <h4 class="card-title">Roger Federer</h4>
        <p class="card-text">Roger Federer is a Swiss professional tennis player.</p>
        <a href="#" class="btn btn-primary">Following</a>
       </div>
  </div>
</div>
</body>
</html>

The example of Bootstrap cards overlays will look like below screenshot.

Bootstrap 4 Card Image Overlays Example

#7: Bootstrap 4 Card Columns

The .card-columns class creates a masonry-like grid of cards. The layout will automatically modify as you insert more cards.

Note: The cards are displayed vertically on small screens.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Cards Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<h2>Cards Columns</h2>
<div class="card-columns">
 <div class="card bg-warning">
  <div class="card-body text-center">
    <p class="card-text">Some Text</p>
  </div>
 </div>
 <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some Text</p>
    </div>
  </div>
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some Text</p>
    </div>
  </div>
  <div class="card bg-info">
    <div class="card-body text-center">
      <p class="card-text">Some Text</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Some Text</p>
    </div>
  </div>
  <div class="card bg-light">
    <div class="card-body text-center">
      <p class="card-text">Some Text</p>
    </div>
  </div>
 </div>
</div>
</body>
</html>

The example of Bootstrap card columns will look like below screenshot.

Bootstrap 4 Card Columns Example

#8: Bootstrap 4 Card Deck

The .card-deck class creates a grid of cards that are of same height and width. The layout will automatically change as you insert more cards.

Note: The cards are displayed vertically on small screens.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Cards Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<h2>Cards Deck</h2>
<div class="card-deck">
    <div class="card bg-primary">
      <div class="card-body text-center">
        <p class="card-text">Some Text</p>
      </div>
    </div>
    <div class="card bg-warning">
      <div class="card-body text-center">
        <p class="card-text">Some Text</p>
      </div>
    </div>
    <div class="card bg-success">
      <div class="card-body text-center">
        <p class="card-text">Some Text</p>
      </div>
    </div>
    <div class="card bg-danger">
      <div class="card-body text-center">
        <p class="card-text">Some Text</p>
      </div>
    </div>  
  </div>
</div>
</body>
</html>

The example of Bootstrap card deck will look like below screenshot.

Bootstrap 4 Card Deck Example

#9: Bootstrap 4 Card Group

The .card-group class is similar to .card-deck. There is only difference that the .card-group class removes left and right margins between each card.

Note: The cards are displayed vertically on small screens.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Cards Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<h2>Cards Group</h2>
<div class="card-group">
    <div class="card bg-primary">
      <div class="card-body text-center">
        <p class="card-text">Some Text</p>
      </div>
    </div>
    <div class="card bg-warning">
      <div class="card-body text-center">
        <p class="card-text">Some Text</p>
      </div>
    </div>
    <div class="card bg-success">
      <div class="card-body text-center">
        <p class="card-text">Some Text</p>
      </div>
    </div>
    <div class="card bg-danger">
      <div class="card-body text-center">
        <p class="card-text">Some Text</p>
      </div>
    </div>  
  </div>
</div>
</body>
</html>

The example of Bootstrap card deck will look like below screenshot.

Bootstrap 4 Card Group Example

At last, our Bootstrap 4 Cards Tutorial With Example is over.

Post Your Thoughts

This site uses Akismet to reduce spam. Learn how your comment data is processed.