Post
Ask Question

Bootstrap 4 Card Classes

In this write-up, we will learn about Bootstrap 4 Card classes. Bootstrap is an open source framework to create responsive web applications. Bootstrap card classes are useful to create a bordered box. Bootstrap 4 cards classes replace old panels, walls, and thumbnails. In this blog, we will discuss the following classes.

  • Basic card
  • Header Card
  • Footer card
  • Titles, text, and links
  • Card Image
  • Card Columns
  • Card Deck
  • Card Group
  • Contextual color

Basic card

By using .card and .card-body class, we can create a container or a Box.
 
Open Visual Studio and create a new project. Rename it as Bootstrap4 Table and add the reference of the Bootstrap 4 files into the page's head section. In the body section, add some divs and add basic card class.
  1. <div class="card">  
  2.      <div class="card-body"> Basic Card Class </div>  
  3.  </div>  
Complete Code
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>Bootstarp 4 Card Classes</title>  
  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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>  
  9.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  10. </head>  
  11. <body>  
  12.     <div class="container">  
  13.         <div class="card">  
  14.             <div class="card-body"> Basic Card Class </div>  
  15.         </div>  
  16.     </div>  
  17. </body>  
  18. </html>  
Run the project and check the result.
 
Bootstrap 4 Card Classes

Header and Footer card classes

These classes are used to add a header and a footer to a card.

 

  • .card-header
  • .card-footer

 

  1. <div class="card-header text-center"> Card Header </div>  
  2.            <div class="card-body text-center"> Basic Body </div>  
  3.            <div class="card-footer text-center">  Card Footer </div>  
Complete Code 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>Bootstarp 4 Card Classes</title>  
  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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>  
  9.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  10. </head>  
  11. <body>  
  12.     <div class="container">  
  13.         <div class="card">  
  14.             <div class="card-header text-center"> Card Header </div>  
  15.             <div class="card-body text-center"> Basic Body </div>  
  16.             <div class="card-footer text-center">  Card Footer </div>  
  17.         </div>  
  18.     </div>  
  19. </body>  
  20. </html>  

Run the project and check result.

Bootstrap 4 Card Classes 
 
Contextual color
 
These classes are used to add a background color to the card.
  • .bg-primary,
  • .bg-success,
  • .bg-secondary,
  • .bg-info,
  • .bg-warning,
  • .bg-danger,
  • .bg-dark
  • .bg-light
Now, add some divs and add these classes.
  1. <div class="container">  
  2.   
  3.        <div class="card bg-primary text-white">  
  4.            <div class="card-body">Primary card</div>  
  5.        </div>  
  6.        <br>  
  7.        <div class="card bg-secondary text-white">  
  8.            <div class="card-body">Secondary card</div>  
  9.        </div>  
  10.        <br>  
  11.        <div class="card bg-success text-white">  
  12.            <div class="card-body">Success card</div>  
  13.        </div>  
  14.        <br>  
  15.        <div class="card bg-info text-white">  
  16.            <div class="card-body">Info card</div>  
  17.        </div>  
  18.        <br>  
  19.        <div class="card bg-warning text-white">  
  20.            <div class="card-body">Warning card</div>  
  21.        </div>  
  22.        <br>  
  23.        <div class="card bg-danger text-white">  
  24.            <div class="card-body">Danger card</div>  
  25.        </div>  
  26.        <br>  
  27.   
  28.        <div class="card bg-dark text-white">  
  29.            <div class="card-body">Dark card</div>  
  30.        </div>  
  31.        <br>  
  32.        <div class="card bg-light text-dark">  
  33.            <div class="card-body">Light card</div>  
  34.        </div>  
  35.    </div>  
Complete code
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>Bootstarp 4 Card Classes</title>  
  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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>  
  9.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  10. </head>  
  11. <body>  
  12.     <div class="container">  
  13.   
  14.         <div class="card bg-primary text-white">  
  15.             <div class="card-body">Primary card</div>  
  16.         </div>  
  17.         <br>  
  18.         <div class="card bg-secondary text-white">  
  19.             <div class="card-body">Secondary card</div>  
  20.         </div>  
  21.         <br>  
  22.         <div class="card bg-success text-white">  
  23.             <div class="card-body">Success card</div>  
  24.         </div>  
  25.         <br>  
  26.         <div class="card bg-info text-white">  
  27.             <div class="card-body">Info card</div>  
  28.         </div>  
  29.         <br>  
  30.         <div class="card bg-warning text-white">  
  31.             <div class="card-body">Warning card</div>  
  32.         </div>  
  33.         <br>  
  34.         <div class="card bg-danger text-white">  
  35.             <div class="card-body">Danger card</div>  
  36.         </div>  
  37.         <br>  
  38.   
  39.         <div class="card bg-dark text-white">  
  40.             <div class="card-body">Dark card</div>  
  41.         </div>  
  42.         <br>  
  43.         <div class="card bg-light text-dark">  
  44.             <div class="card-body">Light card</div>  
  45.         </div>  
  46.     </div>  
  47.       
  48. </body>  
  49. </html>  

Run the project and check the result.

Bootstrap 4 Card Classes 
Card Columns
 
By using this, we can create grids of cards.
  • .card-columns 
Let us add some divs and add the column class.
  1. <div class="card-columns">  
  2.            <div class="card bg-primary">  
  3.                <div class="card-body text-center">  
  4.                    <p class="card-text">Card One</p>  
  5.                </div>  
  6.            </div>  
  7.            <div class="card bg-primary">  
  8.                <div class="card-body text-center">  
  9.                    <p class="card-text">Second Card</p>  
  10.                </div>  
  11.            </div>  
  12.            <div class="card bg-primary">  
  13.                <div class="card-body text-center">  
  14.                    <p class="card-text">Third card</p>  
  15.                </div>  
  16.            </div>  
  17.        </div>  
Complete Code 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>Bootstarp 4 Card Classes</title>  
  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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>  
  9.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  10. </head>  
  11. <body>  
  12.     <div class="container">  
  13.         <div class="card-columns">  
  14.             <div class="card bg-primary">  
  15.                 <div class="card-body text-center">  
  16.                     <p class="card-text">Card One</p>  
  17.                 </div>  
  18.             </div>  
  19.             <div class="card bg-primary">  
  20.                 <div class="card-body text-center">  
  21.                     <p class="card-text">Second Card</p>  
  22.                 </div>  
  23.             </div>  
  24.             <div class="card bg-primary">  
  25.                 <div class="card-body text-center">  
  26.                     <p class="card-text">Third card</p>  
  27.                 </div>  
  28.             </div>  
  29.         </div>  
  30.         </div>  
  31. </body>  
  32. </html>  

Run the project and check the result.

Bootstrap 4 Card Classes 

Summary

In this blog, we learned about Bootstrap Card classes. Bootstrap 4 card classes replaced the old panels, walls, and thumbnails of bootstrap.
Next Recommended Reading Bootstrap 4 Table Classes