Bootstrap 4 - Cards

Card is a content container which displays a bordered box with some padding around it. It includes background colors, headers, footers and other display options.
To get a basic card, just add .card class to the <div> element and place the content inside a .card-body class as shown in the following example −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Basic Card</h2>
         <div class = "card">
            <div class = "card-body">
               <h5 class = "card-title">Tutorialspoint</h5>
               
               <p class = "card-text">
                  Our mission is to deliver Simply Easy Learning with clear, crisp, and 
                  to-the-point content on a wide range of technical and non-technical 
                  subjects without any preconditions and impediments.
               </p>
               <a href="#" class = "btn btn-info">More Info</a>
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −

                  Our mission is to deliver Simply Easy Learning with clear, crisp, and 
                  to-the-point content on a wide range of technical and non-technical 
                  subjects without any preconditions and impediments.
               
You can add header for the card by using the .card-header class and footer by using the .card-footer class.
The following example demonstrates this −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Card Header and Footer</h2>
         <div class = "card">
            <div class = "card-header">Card Header</div>
            <div class = "card-body">
               <h5 class = "card-title">Tutorialspoint</h5>
               <p class = "card-text">
                  Our mission is to deliver Simply Easy Learning with clear, crisp, and 
                  to-the-point content on a wide range of technical and non-technical 
                  subjects without any preconditions and impediments.
               </p>
               <a href = "#" class = "btn btn-info">More Info</a>
            </div>
            <div class = "card-footer">Card Footer</div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −

                  Our mission is to deliver Simply Easy Learning with clear, crisp, and 
                  to-the-point content on a wide range of technical and non-technical 
                  subjects without any preconditions and impediments.
               
You can create list of content to the cards by using the .list-group-flush class as shown in the below example −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>List Groups</h2>
         <div class = "card" style = "width: 18rem;">
            <div class = "card-header">Card Header</div>
            <ul class = "list-group list-group-flush">
               <li class = "list-group-item">HTML-5</li>
               <li class = "list-group-item">CSS-3</li>
               <li class = "list-group-item">Bootstrap-4</li>
            </ul>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −
HTML-5
CSS-3
Bootstrap-4
Bootstrap uses contextual classes such as .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light to change the background color of the card.
The following example demonstrates this −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h3>Contextual Cards</h3>
         <div class = "card bg-primary text-white">
            <div class = "card-body">Primary card</div>
         </div>
         <br>
         
         <div class = "card bg-success text-white">
            <div class = "card-body">Success card</div>
         </div>
         <br>
         
         <div class = "card bg-info text-white">
            <div class = "card-body">Info card</div>
         </div>
         <br>
         
         <div class = "card bg-warning text-white">
            <div class = "card-body">Warning card</div>
         </div>
         <br>
         
         <div class = "card bg-danger text-white">
            <div class = "card-body">Danger card</div>
         </div>
         <br>
         
         <div class = "card bg-secondary text-white">
            <div class = "card-body">Secondary card</div>
         </div>
         <br>
         
         <div class = "card bg-dark text-white">
            <div class = "card-body">Dark card</div>
         </div>
         <br>
         
         <div class = "card bg-light text-dark">
            <div class = "card-body">Light card</div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −
You can place the image at the top of the card by using .card-img-top class or at the bottom by using .card-img-bottom class to the <img> element as shown in the below example −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Image at Top</h2>
         <div class = "card" style = "width:350px;height:400px">
            <img class = "card-img-top" src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg" 
               alt = "Card Image Top">
            
            <div class = "card-body">
               <h4 class = "card-title">HTML</h4>
               <p class = "card-text">
                  HTML stands for Hypertext Markup Language, and it is the most widely 
                  used language to write Web Pages.
               </p>
               <a href = "#" class = "btn btn-primary">More Info</a>
            </div>
         </div>
         <br>
         
         <h2>Image at Bottom</h2>
         <div class = "card" style = "width:350px;height:400px">
            <div class = "card-body">
               <h4 class = "card-title">CSS</h4>
               <p class = "card-text">
                  Cascading Style Sheets, fondly referred to as CSS, is a simple design 
                  language intended to simplify the process of making web pages 
                  presentable.
               </p>
               <a href = "#" class = "btn btn-primary">More Info</a>
            </div>
            <img class = "card-img-bottom" 
               src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg" 
               alt = "Card Image Bottom">
         </div>
         <br> 
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −

                  HTML stands for Hypertext Markup Language, and it is the most widely 
                  used language to write Web Pages.
               

                  Cascading Style Sheets, fondly referred to as CSS, is a simple design 
                  language intended to simplify the process of making web pages 
                  presentable.
               
Add the background image to a card and place the text on the top of an image by using .card-img-overlay class.
The following example demonstrates this −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Image Overlay</h2>
         <div class = "card" style = "width:350px;height:400px">
            <img class = "card-img-top" 
               src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg" 
               alt = "Card image" style = "width:100%">
            <div class = "card-img-overlay">
               <p class = "card-text text-white">
                  HTML stands for Hypertext Markup Language. It is the most widely used 
                  language to write Web Pages
               </p>
               <a href = "#" class = "btn btn-primary">More Info</a>
            </div>
            
            <div class = "card-body">
               <h4 class = "card-title">HTML</h4>
               <p class = "card-text">
                  HTML was developed with the intent of defining the structure of 
                  documents like headings, paragraphs, lists, and so forth to 
                  facilitate the sharing of scientific information between researchers.
               </p>
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −

                  HTML stands for Hypertext Markup Language. It is the most widely used 
                  language to write Web Pages
               

                  HTML was developed with the intent of defining the structure of 
                  documents like headings, paragraphs, lists, and so forth to 
                  facilitate the sharing of scientific information between researchers.
               
Card groups can be used to place multiple cards as single attached element. The .card-group class specifies equal width and height columns and removes left and right margins between each card.
Note − On the small screens (less than 576px), cards will get displayed vertically along with top and bottom margin.
The following example demonstrates displaying of card groups as single attached element −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Card-Groups</h2>
         <div class = "card-group">
            <div class = "card">
               <img class = "card-img-top" 
                  src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg" 
                  alt = "Card Groups">
               <div class = "card-body">
                  <h5 class = "card-title">HTML</h5>
                  <p class = "card-text">
                     HTML stands for Hypertext Markup Language, and it is the most 
                     widely used language to write Web Pages.
                  </p>
               </div>
               
               <div class = "card-footer">
                  <small class = "text-muted">Card Footer</small>
               </div>
            </div>
            
            <div class = "card">
               <img class = "card-img-top" 
                  src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg" 
                  alt = "Card Groups">
               
               <div class = "card-body">
                  <h5 class = "card-title">CSS</h5>
                  <p class = "card-text">
                     Cascading Style Sheets, fondly referred to as CSS, is a simple 
                     design language intended to simplify the process of making web 
                     pages presentable.
                  </p>
               </div>
               <div class = "card-footer">
                  <small class = "text-muted">Card Footer</small>
               </div>
            </div>
            
            <div class = "card">
               <img class = "card-img-top" 
                  src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg" 
                  alt = "Card Groups">
               
               <div class = "card-body">
                  <h5 class = "card-title">Bootstrap</h5>
                  <p class = "card-text">
                     Bootstrap is a sleek, intuitive, and powerful, mobile first 
                     front-end framework for faster and easier web development.
                  </p>
               </div>
               
               <div class = "card-footer">
                  <small class = "text-muted">Card Footer</small>
               </div>
               
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −

                     HTML stands for Hypertext Markup Language, and it is the most 
                     widely used language to write Web Pages.
                  

                     Cascading Style Sheets, fondly referred to as CSS, is a simple 
                     design language intended to simplify the process of making web 
                     pages presentable.
                  

                     Bootstrap is a sleek, intuitive, and powerful, mobile first 
                     front-end framework for faster and easier web development.
                  
Card decks specify equal width and height columns which are not attached to each other. You can do this by using .card-deck class.
The following example demonstrates this −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Card Decks</h2>
         <div class = "card-deck">
            <div class = "card">
               <img class="card-img-top" 
                  src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg" 
                  alt = "Card Groups">
               
               <div class = "card-body">
                  <h5 class = "card-title">HTML</h5>
                  <p class = "card-text">
                     HTML stands for Hypertext Markup Language, and it is the most 
                     widely used language to write Web Pages.
                  </p>
               </div>
               
               <div class = "card-footer">
                  <small class = "text-muted">Card Footer</small>
               </div>
            </div>
            
            <div class = "card">
               <img class = "card-img-top" 
                  src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg" 
                  alt = "Card Groups">
               
               <div class = "card-body">
                  <h5 class = "card-title">CSS</h5>
                  <p class = "card-text">
                     Cascading Style Sheets, fondly referred to as CSS, is a simple 
                     design language intended to simplify the process of making web 
                     pages presentable.
                  </p>
               </div>
               
               <div class = "card-footer">
                  <small class = "text-muted">Card Footer</small>
               </div>
            </div>
            
            <div class = "card">
               <img class = "card-img-top" 
                  src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg" 
                  alt = "Card Groups">
               
               <div class = "card-body">
                  <h5 class = "card-title">Bootstrap</h5>
                  <p class = "card-text">
                     Bootstrap is a sleek, intuitive, and powerful, mobile first 
                     front-end framework for faster and easier web development.
                  </p>
               </div>
               
               <div class = "card-footer">
                  <small class = "text-muted">Card Footer</small>
               </div>
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −

                     HTML stands for Hypertext Markup Language, and it is the most 
                     widely used language to write Web Pages.
                  

                     Cascading Style Sheets, fondly referred to as CSS, is a simple 
                     design language intended to simplify the process of making web 
                     pages presentable.
                  

                     Bootstrap is a sleek, intuitive, and powerful, mobile first 
                     front-end framework for faster and easier web development.
                  
Cards can be placed into grid layout structure by using .card-columns class as shown in the below example −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Card Columns</h2>
         <div class =" card-columns">
            <!-- Card 1 -->
            <div class = "card">
               <div class = "card-header">Card Header</div>
               <div class = "card-body">
                  <p class = "card-text">This is Card - 1</p>
               </div>
            </div>
            
            <!-- Card 2 -->
            <div class = "card">
               <div class = "card-body">
                  <p class = "card-text">This is Card - 2</p>
               </div>
            </div>
            
            <!-- Card 3 -->
            <div class = "card">
               <div class = "card-header">Card Header</div>
               <div class = "card-body">
                  <p class = "card-text">
                     This is Card - 3 with 
                     <a href = "#" class = "card-link">link</a>
                  </p>
               </div>
               <div class = "card-footer">Card Footer</div>
            </div>
            
            <!-- Card 4 -->
            <div class = "card">
               <div class = "card-header">Card Header</div>
               <div class = "card-body">
                  <p class = "card-text">This is Card - 4</p>
               </div>
               <div class = "card-footer">Card Footer</div>
            </div>
            
            <!-- Card 5 -->
            <div class = "card">
               <div class = "card-body">
                  <h4 class = "card-title">Card Title</h4>
                  <p class = "card-text">This is Card - 5</p>
               </div>
            </div>
            
            <!-- Card 6 -->
            <div class = "card">
               <div class = "card-header">Card Header</div>
               <div class = "card-body">
                  <p class = "card-text">
                     This is Card - 6 with <a href = "#" class = "card-link">link</a>
                  </p>
               </div>
            </div>
            
            <!-- Card 7 -->
            <div class = "card">
               <div class = "card-header">Card Header</div>
               <div class = "card-body">
                  <p class = "card-text">This is Card - 7</p>
               </div>
               <div class = "card-footer">Card Footer</div>
            </div>
            
            <!-- Card 8 -->
            <div class = "card text-white" >
               <!-- Image -->
               <img class = "card-img" 
                  src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg" 
                  alt = "Photo of Cat">
               
               <!-- Text Content -->
               <div class = "card-img-overlay">
                  <h4 class = "card-title">Card 8</h4>
                  <p class = "card-text">This is an image for Card - 8</p>
               </div>
               
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −
This is Card - 1
This is Card - 2

                     This is Card - 3 with 
                     link

This is Card - 4
This is Card - 5

                     This is Card - 6 with link

This is Card - 7
This is an image for Card - 8
You can create nav tab or nav pill to the card by adding .card-header-tabs class or .card-header-pills class to <ul> element.
The following example demonstrates adding of both nav tab and nav pill to the card −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Navigation Tab</h2>
         <div class = "card text-center">
            
            <div class = "card-header">
               <ul class = "nav nav-tabs card-header-tabs">
                  <li class = "nav-item">
                     <a class = "nav-link active" href = "#">HTML</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">CSS</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link " href = "#">Bootstrap</a>
                  </li>
               </ul>
            </div>
            
            <div class = "card-body">
               <h5 class = "card-title">Title</h5>
               <p class = "card-text">Content goes here...</p>
            </div>
         </div>
         <br>
         
         <h2>Navigation Pill</h2>
         <div class = "card text-center">
            <div class = "card-header">
               <ul class = "nav nav-pills card-header-pills">
                  <li class = "nav-item">
                     <a class = "nav-link active" href = "#">HTML</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">CSS</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link " href = "#">Bootstrap</a>
                  </li>
               </ul>
            </div>
            <div class = "card-body">
               <h5 class = "card-title">Title</h5>
               <p class = "card-text">Content goes here...</p>
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −

HTML


CSS


Bootstrap

Content goes here...

HTML


CSS


Bootstrap

Content goes here...

    26 Lectures 
     2 hours 

 Anadi Sharma

    54 Lectures 
     4.5 hours 

 Frahaan Hussain

    161 Lectures 
     14.5 hours 

 Eduonix Learning Solutions

    20 Lectures 
     4 hours 

 Azaz Patel

    15 Lectures 
     1.5 hours 

 Muhammad Ismail

    62 Lectures 
     8 hours 

 Yossef Ayman Zedan
 Print
 Add Notes
 Bookmark this page