Bootstrap Cards - How to Use Bootstrap 5 Cards



Bootstrap Cards

  • A card in bordered box with some padding around its content. It includes options for headers, footers, content, colors.
how-to-create-cards-with-bootstrap

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="card" style="width: 18rem;">
      <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" 
      aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
      <rect width="100%" height="100%" fill="#868e96">
      </rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
    
      <div class="card-body">
        <h5 class="card-title">Title</h5>
        <p class="card-text">example consider “www.wikitechy.com” is a website.</p>
        <a href="#" class="btn btn-primary">Go</a>
      </div>
    </div>
  </body>
</html>

Output

bootstrap-card

Bootstrap Card Title, 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) inside .card-body.
  • The .card-link class adds a blue color to any link, and a hover effect.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="card" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">Title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Subtitle</h6>
        <p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
        <a href="#" class="card-link">Link</a>
      </div>
    </div>
  </body>
</html>

  <body class="p-3 m-0 border-0 bd-example">
    <div class="card" style="width: 18rem;">
      <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
    
      <div class="card-body">
        <h5 class="card-title">Title</h5>
        <p class="card-text">example consider “www.wikitechy.com” is a website.</p>
        <a href="#" class="btn btn-primary">Go</a>
      </div>
    </div>
  </body>
</html>

Output

bootstrap-title-text-link-card

Bootstrap Card Images

  • .card-img-top places an image to the top of the card.
  • With .card-text, text can be added to the card.
  • Text within .card-text can also be styled with the standard HTML tags.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="card" style="width: 18rem;">
      <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" 
      aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
      <rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
      <div class="card-body">
        <p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
      </div>
    </div>
  </body>
</html>

Output

bootstrap-card-image

Bootstrap Card List Groups Example 1

  • In Bootstrap, a card list group is a list of related items displayed in a card-like format. This is achieved by combining the card component with the list-group component.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="card" style="width: 18rem;">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">KaashivInfotech</li>
        <li class="list-group-item">Wikitechy</li>
        <li class="list-group-item">Kaashiv</li>
      </ul>
    </div>
  </body>
</html>

Output

bootstrap-card-list-group

Bootstrap Card List Groups Example 2

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="card" style="width: 18rem;">
      <div class="card-header">
        Featured
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">KaashivInfotech</li>
        <li class="list-group-item">Wikitechy</li>
        <li class="list-group-item">Kaashiv</li>
      </ul>
    </div>
  </body>
</html>

Output

bootstrap-card-list-group

Bootstrap Card List Groups Example 3

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="card" style="width: 18rem;">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">KaashivInfotech</li>
        <li class="list-group-item">wikitechy</li>
        <li class="list-group-item">Kaashiv</li>
      </ul>
      <div class="card-footer">
        Card footer
      </div>
    </div>
  </body>
</html>

Output

bootstrap-card-list-groups

Bootstrap Card Kitchen Sink

  • Image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="card" style="width: 18rem;">
      <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" 
      aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
      <rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
    
      <div class="card-body">
        <h5 class="card-title">Title</h5>
        <p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">KaashivInfotech</li>
        <li class="list-group-item">wikitechy</li>
        <li class="list-group-item">Kaashiv</li>
      </ul>
      <div class="card-body">
        <a href="#" class="card-link">Link</a>
      </div>
    </div>
  </body>
</html>

Output

bootstrap-card-kitchen-sink

Bootstrap Header and Footer Example 1

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

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="card">
      <div class="card-header">
        Featured
      </div>
      <div class="card-body">
        <h5 class="card-title">Title</h5>
        <p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
        <a href="#" class="btn btn-primary">Link</a>
      </div>
    </div>
  </body>
</html>

Output

bootstrap-card-header-and-footer

Bootstrap Header and Footer Example 2

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="card">
      <h5 class="card-header">Featured</h5>
      <div class="card-body">
        <h5 class="card-title">Title</h5>
        <p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
        <a href="#" class="btn btn-primary">Link</a>
      </div>
    </div>
  </body>
</html>

Output

bootstrap-card-header-and-footer

Bootstrap Header and Footer Example 3

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="card">
      <div class="card-header">
        Quote
      </div>
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>A well-known quote, contained in a blockquote element.</p>
          <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
        </blockquote>
      </div>
    </div>
  </body>
</html>

Output

bootstrap-card-header

Bootstrap Header and Footer Example 4

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="card text-center">
      <div class="card-header">
        Featured
      </div>
      <div class="card-body">
        <h5 class="card-title">Title</h5>
        <p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
        <a href="#" class="btn btn-primary">Link</a>
      </div>
      <div class="card-footer text-muted">
        3 days ago
      </div>
    </div>
  </body>
</html>

Output

bootstrap-card-header-footer

Bootstrap Card Navigation

  • Bootstrap Card Navigation is a user interface design pattern in which a set of cards are used as navigation items to switch between different content sections or pages.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <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" aria-current="true" href="#">Active</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled">Disabled</a>
          </li>
        </ul>
      </div>
      <div class="card-body">
        <h5 class="card-title">Title</h5>
        <p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
        <a href="#" class="btn btn-primary">Somewhere</a>
      </div>
    </div>
  </body>
</html>

Output

bootstrap-card-navigation

Bootstrap Card Image Cap

  • 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.
  • We have added the image outside of the .card-body to span the entire width:

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="card mb-3">
      <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" 
      aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
      <rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
      <div class="card-body">
        <h5 class="card-title">KaashivInfotech</h5>
        <p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
        <p class="card-text"><small class="text-muted">Last updated 5 mins ago</small></p>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">KaashivInfotech</h5>
        <p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
        <p class="card-text"><small class="text-muted">Last updated 5 mins ago</small></p>
      </div>
      <svg class="bd-placeholder-img card-img-bottom" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" 
      aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
      <rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
    </div>
  </body>
</html>

Output

bootstrap-card-image-cap

Bootstrap Card Image overlay

  • Turn an image into a card background and use .card-img-overlay to add text on top of the image.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="card text-bg-dark">
      <svg class="bd-placeholder-img bd-placeholder-img-lg card-img" width="100%" height="270" 
      xmlns="http://www.w3.org/2000/svg" 
      role="img" aria-label="Placeholder: Card image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
      <rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Card image</text></svg>
    
      <div class="card-img-overlay">
        <h5 class="card-title">Title</h5>
        <p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
        <p class="card-text"><small>Last updated 5 mins ago</small></p>
      </div>
    </div>
  </body>
</html>

Output

bootstrap-card-image-overlay

Bootstrap Card Background Color

  • You can use the bg-* classes in Bootstrap to set the background color of a card. For example, bg-primary sets the background color to the primary color defined in the Bootstrap theme, while bg-dark sets the background color to a dark shade. You can also set a custom background color by using the bg-* classes along with a color name or a HEX code.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="card text-bg-primary mb-3" style="max-width: 18rem;">
      <div class="card-header">Primary</div>
    </div>
    <div class="card text-bg-secondary mb-3" style="max-width: 18rem;">
      <div class="card-header">Secondary</div>
    </div>
    <div class="card text-bg-success mb-3" style="max-width: 18rem;">
      <div class="card-header">Success</div>
    </div>
    <div class="card text-bg-danger mb-3" style="max-width: 18rem;">
      <div class="card-header">Danger</div>
    </div>
    <div class="card text-bg-warning mb-3" style="max-width: 18rem;">
      <div class="card-header">Warning</div>
    </div>
    <div class="card text-bg-info mb-3" style="max-width: 18rem;">
      <div class="card-header">Info</div>
    </div>
    <div class="card text-bg-light mb-3" style="max-width: 18rem;">
      <div class="card-header">Light</div>
    </div>
    <div class="card text-bg-dark mb-3" style="max-width: 18rem;">
      <div class="card-header">Dark</div>
    </div>
  </body>
</html>

Output

bootstrap-card-background-and-color

Bootstrap Card Border

  • You can use the border-* classes in Bootstrap to set the border of a card. For example, border-primary sets the border color to the primary color defined in the Bootstrap theme, while border-dark sets the border color to a dark shade. You can also set the border width by using the border-* classes along with a width value such as border-1, border-2, etc.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="card border-primary mb-3" style="max-width: 18rem;">
      <div class="card-header">Primary</div>
    </div>
    <div class="card border-secondary mb-3" style="max-width: 18rem;">
      <div class="card-header">Secondary</div>
    </div>
    <div class="card border-success mb-3" style="max-width: 18rem;">
      <div class="card-header">Success</div>
    </div>
    <div class="card border-danger mb-3" style="max-width: 18rem;">
      <div class="card-header">Danger</div>
    </div>
    <div class="card border-warning mb-3" style="max-width: 18rem;">
      <div class="card-header">Warning</div>
    </div>
    <div class="card border-info mb-3" style="max-width: 18rem;">
      <div class="card-header">Info</div>
    </div>
    <div class="card border-light mb-3" style="max-width: 18rem;">
      <div class="card-header">Light</div>
    </div>
    <div class="card border-dark mb-3" style="max-width: 18rem;">
      <div class="card-header">Dark</div>
    </div>
  </body>
</html>

Output

bootstrap-card-border

Bootstrap Card group

  • Bootstrap Card Group is a component in the Bootstrap framework that allows you to group multiple cards together into a single, cohesive unit.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="card-group">
      <div class="card">
        <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" 
        aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
        <rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
    
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
        </div>
        <div class="card-footer">
          <small class="text-muted">Last updated 5 mins ago</small>
        </div>
      </div>
      <div class="card">
        <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" 
        aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
        <rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
    
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
        </div>
        <div class="card-footer">
          <small class="text-muted">Last updated 5 mins ago</small>
        </div>
      </div>
      <div class="card">
        <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" 
        aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
        <rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
    
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
        </div>
        <div class="card-footer">
          <small class="text-muted">Last updated 5 mins ago</small>
        </div>
      </div>
    </div>
  </body>
</html>

Output

bootstrap-card-group

Related Searches to Bootstrap Cards - How to Use Bootstrap 5 Cards