Post
Ask Question

How To Create Cards Components In Bootstrap 4

Introduction

This article will demonstrate you, how you can use bootstrap 4 cards components. A cardis a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. if you are familiar with Bootstrap 3, cards replace old panals,well and thumbnails. Cards are build with as little markup and styles as possible, but still manage to deliver a ton of control and customazation. Card build with flexbox, they offer easy alignment and mix well with other bootstrap components.

To use Bootstrap 4 card components your project, you need to have the following downloaded or cdn link scripts,
  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  3. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  

Example of Basic Card

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <div class="card">  
  13.             <div class="card-body">Basic card</div>  
  14.         </div>  
  15.     </div>  
  16. </body>  
  17. </html>  

Output

Cards In Bootstrap

Example of Card with header and footer

The .card-header class adds a heading to the card and the .card-footer class adds a footer to the card.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Card</title>  
  5.     <meta charset="utf-8" />  
  6.        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11. <div class="container py-5">  
  12.     <div class="card">  
  13.         <div class="card-header">  
  14.             <h5>header</h5>  
  15.         </div>  
  16.         <div class="card-body">  
  17.             <h5>bady</h5>  
  18.         </div>  
  19.         <div class="card-footer">  
  20.             <h5>footer</h5>  
  21.         </div>  
  22.     </div>  
  23. </div>  
  24. </body>  
  25. </html>  
Output
Cards In Bootstrap

Example of Card Titles, Text, and Links

Use .card-title to add card titles to any heading element. The .card-text class is used to remove bottom margins for a p element if it is the last child (or the only one) in card-body. The .card-link class adds a blue color to any link, and a hover effect.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <div class="card">  
  13.             <div class="card-body">  
  14.                 <div class="card-title">  
  15.                     Card-title  
  16.                 </div>  
  17.                 <div class="card-text">  
  18.                     Card text  
  19.                 </div>  
  20.                 <a href="#" class="card-link">link-1</a>  
  21.                 <a href="#" class="card-link">link-2</a>  
  22.                 <a href="#" class="card-link">link-3</a>  
  23.             </div>          
  24.         </div>  
  25.     </div>  
  26. </body>  
  27. </html>  

Output

Cards In Bootstrap
Example of with Card Images

Add .card-img-top or .card-img-bottom to an <img> to place the image at the top or at the bottom inside the card. Note that we have added the image outside of the .card-body to span the entire width.

Card Image Top

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h3>Bootstrap 4 Card Image</h3>  
  13.         <h4>Card image top</h4>  
  14.         <div class="card" style="width:250px;">  
  15.             <img class="card-img-top" src="images/farhan.jpg" alt="farhan" />  
  16.             <div class="card-body">  
  17.                 <h4 class="card-title">Farhan Ahmed</h4>  
  18.                 <p class="card-text">Hi, I am full-stack developer.</p>  
  19.                 <a href="#" class="btn btn-primary rounded-0">View Profile</a>  
  20.             </div>  
  21.         </div>        
  22.     </div>  
  23. </body>  
  24. </html>  
Output

Cards In Bootstrap
 

CaCard image bottom

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h3>Bootstrap 4 Card Image</h3>  
  13.         <h4>Card image bottom</h4>  
  14.         <div class="card" style="width:250px;">              
  15.             <div class="card-body">  
  16.                 <h4 class="card-title">Farhan Ahmed</h4>  
  17.                 <p class="card-text">Hi, I am full-stack developer.</p>  
  18.                 <a href="#" class="btn btn-primary rounded-0">View Profile</a>  
  19.             </div>  
  20.             <img class="card-img-bottom" src="images/farhan.jpg" alt="farhan" />  
  21.         </div>        
  22.     </div>  
  23. </body>  
  24. </html>  
Output
Cards In Bootstrap
Example of Card Image Overlay

Card image overlay turns an image into a card background and use .card-img-overlay to overlay the card's text.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h3>Bootstrap 4 Card Image Overlay</h3>  
  13.         <div class="card img-fluid" style="width:250px;">  
  14.             <img class="card-img-top" src="images/farhan.jpg" alt="farhan" />  
  15.             <div class="card-img-overlay">  
  16.                 <h4 class="card-title">Farhan Ahmed</h4>  
  17.                 <p class="card-text">Hi, I am full-stack developer.</p>              
  18.             </div>  
  19.         </div>  
  20.     </div>  
  21. </body>  
  22. </html>  
Output
Cards In Bootstrap
Example of Card Columns

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

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h4>Card Columns</h4>  
  13.         <div class="card-columns">  
  14.             <div class="card bg-primary">  
  15.                 <div class="card-body text-center text-white">  
  16.                     <h5 class="text-center">Card One</h5>  
  17.                     <p class="card-text">Some text inside the first card</p>  
  18.                 </div>  
  19.             </div>  
  20.             <div class="card bg-secondary">  
  21.                 <div class="card-body text-center text-white">  
  22.                     <h5 class="text-center">Card Two</h5>  
  23.                     <p class="card-text">Some text inside the Second card</p>  
  24.                 </div>  
  25.             </div>  
  26.             <div class="card bg-danger">  
  27.                 <div class="card-body text-center text-white">  
  28.                     <h5 class="text-center">Card Three</h5>  
  29.                     <p class="card-text">Some text inside the third card</p>  
  30.                 </div>  
  31.             </div>  
  32.             <div class="card bg-success">  
  33.                 <div class="card-body text-center text-white">  
  34.                     <h5 class="text-center">Card Fourth</h5>  
  35.                     <p class="card-text">Some text inside the Fourth card</p>  
  36.                 </div>  
  37.             </div>  
  38.             <div class="card bg-primary">  
  39.                 <div class="card-body text-center text-white">  
  40.                     <h5 class="text-center">Card Fifth</h5>  
  41.                     <p class="card-text">Some text inside the fifth card</p>  
  42.                 </div>  
  43.             </div>  
  44.             <div class="card bg-warning">  
  45.                 <div class="card-body text-center text-white">  
  46.                     <h5 class="text-center">Card Sixth</h5>  
  47.                     <p class="card-text">Some text inside the sixth card</p>  
  48.                 </div>  
  49.             </div>  
  50.             <div class="card bg-info">  
  51.                 <div class="card-body text-center text-white">  
  52.                     <h5 class="text-center">Card Seventh</h5>  
  53.                     <p class="card-text">Some text inside the Seventh card</p>  
  54.                 </div>  
  55.             </div>  
  56.             <div class="card bg-dark">  
  57.                 <div class="card-body text-center text-white">  
  58.                     <h5 class="text-center">Card eighth</h5>  
  59.                     <p class="card-text">Some text inside the eighth card</p>  
  60.                 </div>  
  61.             </div>  
  62.         </div>  
  63.     </div>  
  64. </body>  
  65. </html>  
Output
Cards In Bootstrap
Example of Card Deck

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

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Card Deck</title>  
  5.     <meta charset="utf-8" />  
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <div class="card-deck">  
  13.             <div class="card bg-primary rounded-0">  
  14.                 <div class="card-body">  
  15.                     <h4 class="text-center text-white">Card-1</h4>  
  16.                 </div>  
  17.             </div>  
  18.             <div class="card bg-secondary rounded-0">  
  19.                 <div class="card-body">  
  20.                     <h4 class="text-center text-white">Card-2</h4>  
  21.                 </div>  
  22.             </div>  
  23.             <div class="card bg-success rounded-0">  
  24.                 <div class="card-body">  
  25.                     <h4 class="text-center text-white">Card-3</h4>  
  26.                 </div>  
  27.             </div>  
  28.             <div class="card bg-danger rounded-0">  
  29.                 <div class="card-body">  
  30.                     <h4 class="text-center text-white">Card-4</h4>  
  31.                 </div>  
  32.             </div>  
  33.         </div>  
  34.     </div>  
  35. </body>  
  36. </html>  
Output

Cards In Bootstrap
Example of Card Group

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

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Card Group</title>  
  5.     <meta charset="utf-8" />  
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <div class="card-group">  
  13.             <div class="card bg-primary">  
  14.                 <div class="card-body">  
  15.                     <h4 class="text-center text-white">Card-1</h4>  
  16.                 </div>  
  17.             </div>  
  18.             <div class="card bg-secondary">  
  19.                 <div class="card-body">  
  20.                     <h4 class="text-center text-white">Card-2</h4>  
  21.                 </div>  
  22.             </div>  
  23.             <div class="card bg-success">  
  24.                 <div class="card-body">  
  25.                     <h4 class="text-center text-white">Card-3</h4>  
  26.                 </div>  
  27.             </div>  
  28.             <div class="card bg-danger">  
  29.                 <div class="card-body">  
  30.                     <h4 class="text-center text-white">Card-4</h4>  
  31.                 </div>  
  32.             </div>  
  33.         </div>  
  34.     </div>  
  35. </body>  
  36. </html>  
Output

Cards In Bootstrap


Similar Articles