How do i create card with Bootstrap5, Card Header,Footer,Image Overlay

Last updated Sep 30, 2021


Bootstrap card is a container with bordered box provides some padding inside elements. This card contains background colors, headers, footers and some other display options.

In this bootstrap tutorial example we will learn how to create a Cards with Bootstrap5. To create a cards inside html with bootstrap5 we need to add .card class

<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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

      <title>Bootstrap 5 Card Example</title>
   </head>
   
   <body >
<div class = "container">
         <h2>Card 1</h2>
         <div class = "card">
            <div class = "card-body">
               <h5 class = "card-title">RRTutors</h5>

               <p class = "card-text">
                  Simple bootstrap5 card example, to create card add .card class for the div, it will add all card properties to the assigned div.
               </p>
               <a href="#" class = "btn btn-primary">More Info</a>
            </div>
         </div>
     <h2>Card 2</h2>
    <div class = "card">
            <div class = "card-body">
               <h5 class = "card-title">RRTutors</h5>

               <p class = "card-text">
                  Simple bootstrap5 card example, to create card add .card class for the div, it will add all card properties to the assigned div.
               </p>
               <a href="#" class = "btn btn-primary">More Info</a>
            </div>
         </div>
      </div>


      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

      
   </body>
</html>

 

Output: This will give below out put as screen

How do i create html card with bootstrap5

 

Create Bootstrap5 Card with header and footer properties

We can create card by adding headers and footers to the card. To do this we need to use card-footer and card-header .

 

<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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

      <title>Bootstrap 5 Card Example</title>
   </head>
   
   <body >
<div class = "container">




         <h2>Card with header and footer</h2>
         <div class = "card">
              <div class = "card-header">Card Header</div>
            <div class = "card-body">
               <h5 class = "card-title">RRTutors</h5>

               <p class = "card-text">
                  Simple bootstrap5 card example, to create card add .card class for the div. Card with header and Footer classes
                   it will add all card properties to the assigned div.
               </p>
               <a href="#" class = "btn btn-primary">More Info</a>
            </div>
             <div class = "card-footer">Card Footer</div>
         </div>
         </div>



      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

      
   </body>
</html>

 

Create html card with header and footer

 

 

Create Card with image

Card has one more property like card-img-top to display images

<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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

      <title>Bootstrap 5 Card Example</title>
   </head>
   
   <body >
<div class = "container">



<p></p>
         <div class="card" style="width: 18rem;">
          <img src="https://rrtutors.com/uploads/langpostimg/bootstrap-logo.JPG" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>

<p></p>
    <div class="card" style="width: 18rem;">
          <img src="https://rrtutors.com/uploads/langpostimg/bootstrap-logo.JPG" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>

 </div>



      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

      
   </body>
</html>

 

Output:

Card with Image

 

 

Card with Image Overlay

<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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

      <title>Bootstrap 5 Card Example</title>
   </head>
   
   <body >
<div class = "container">



<p></p>
         <div class="card" style="width: 18rem;">
          <img src="https://i.pinimg.com/736x/41/fe/f9/41fef9da02fc87708bc69ced725877be.jpg" class="card-img-top" alt="...">
           <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">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">View Image</a>
          </div>
        </div>



 </div>



      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

      
   </body>
</html>

 

Output:

Bootstrap Card Image overlay example

 

 

Card with ListGroup

How do we make group of cards with bootstrap5

<div class = "container">


         <div class="card" style="width: 18rem;">
         <div class="card-header">
    Bootstrap
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Bootstrap5</li>
    <li class="list-group-item">Bootstrap4</li>
    <li class="list-group-item">Bootstrap3</li>
  </ul>
        </div>



 </div>

 

 

Card with Navigation Tab

We can create card with nav tab by adding the classes nav-tabs and nav-pills

<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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

      <title>Bootstrap 5 Card Example</title>
   </head>
   
   <body >
<div class = "container">
         <h2>Navigation Tab</h2>
         <div class = "card text-center" style="width: 58rem;">

            <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 " style="width: 58rem;">
            <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://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

      
   </body>
</html>

 

How do i create card with navigation

 

Conclusion: In this bootstrap5 tutorial we created different types of cards like simple cars, card with header and footer, bootstrap5 card with image overlay, card navigation.


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

31 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions