Cards

              
  <div class="card">
    <img src="..." 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 btn-sm">Go somewhere</a>
    </div>
  </div>
  
              
            

              
  <div class="card">
    <div class="list-group list-group-flush">
      <a href="#" class="list-group-item list-group-item-action"><i class="bi bi-person-circle me-2"></i> My profile</a>
      <a href="#" class="list-group-item list-group-item-action"><i class="bi bi-lock me-2"></i> Password</a>
      <a href="#" class="list-group-item list-group-item-action">
        <span class="d-flex justify-content-between align-items-center">
          <span><i class="bi bi-gear me-2"></i> Settings</span>
          <i class="bi bi-chevron-right small"></i>
        </span>
      </a>
    </div>
  </div>
  
              
            

              
  <div class="card">
    <div class="card-header">
      Featured
    </div>
    <div class="card-body">
      <h5 class="card-title">Special title treatment</h5>
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
    </div>
  </div>
  
              
            

              
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Special title treatment</h5>
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
    </div>
    <div class="card-footer text-muted">
      <small class="btn btn-sm text-muted">2 days ago</small> 
      <button class="btn btn-sm btn-link text-muted"><i class="bi bi-share"></i> Share</button> 
      <button class="btn btn-sm btn-link text-muted"><i class="bi bi-chat-left"></i> Comment</button>
    </div>
  </div>
  
              
            

              
  <div class="row">
    <div class="col-sm-6">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Special title treatment</h5>
          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
          <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Special title treatment</h5>
          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
          <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
  
              
            

              
  <div class="card w-75">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-sm btn-primary">Button</a>
    </div>
  </div>
  
  <div class="card w-50">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-sm btn-primary">Button</a>
    </div>
  </div>
  
              
            

              
  <div class="card" style="width: 18rem;">
    <div class="card-body">
      <h5 class="card-title">Special title treatment</h5>
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
    </div>
  </div>
  
              
            

              
  <div class="card">
    <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="#t1" data-bs-toggle="tab" data-bs-target="#t1">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#t2" data-bs-toggle="tab" data-bs-target="#t2">Profile</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
    <div class="card-body tab-content">
      <div class="tab-pane fade show active" id="t1">
        <h5 class="card-title">Home</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
      </div>
      <div class="tab-pane fade" id="t2">
        <h5 class="card-title">Profile</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-sm btn-primary">Go back</a>
      </div>
    </div>
  </div>
  
              
            

              
  <div class="card bg-dark text-white">
    <img src="../../assets/images/content/6-800x600.jpeg" class="card-img opacity-25" alt="">
    <div class="card-img-overlay p-5 w-75 d-flex flex-column justify-content-end">
      <h3 class="card-title text-white">Card title</h3>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <span><a href="#" class="btn btn-xs btn-primary">Read more <i class="bi bi-arrow-right"></i></a></span>
    </div>
  </div>
  
              
            

              
  <div class="card mb-3">
    <div class="row g-0">
      <div class="col-md-4">
        <img src="../../assets/images/content/7-800x600.jpeg" class="img-fluid rounded-start" alt="">
      </div>
      <div class="col-md-8">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          <a href="#">Read more</a>
        </div>
      </div>
    </div>
  </div>