How to Create card in Bootstrap 5

The card is one of the useful components in Bootstrap 5. If you are creating a website, a card is necessary to show different elements visually. You can use different types of classes to create cards in Bootstrap 5.

If you want to create the ard simply you have to the class "card". This class will declare the div as a card and inside the Main div you can easily create ".card-title", "Card-body", "Card-text" and "Card-link" and many more types of classes. Here is the source code.

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  </head>

<div class="card-body">
      
      <h4 class="card-title">
        <p class="card-text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse consequuntur, nulla expedita illum quod molestias distinctio culpa quis officia minima!
        </p>
        
        <a href="#" class="card-link">Card Link</a>
        <a href="#" class="card-link">Another Link </a>
        
      </h4>
    </div>
    
  </div>

<div class="card">
  <div class="card-body bg-primary">
    Basic Cards
    
  </div>
  
  
   <div class="card-body bg-danger">
    Basic Cards
  </div>
  
   <div class="card-body">
    Basic Cards
  </div>
</div>

</html>

Read Other Articles

Boostrap Portfolio Website

Post a Comment

Post a Comment

Contact Form