Bootstrap 5 Learning Kit

   Copy to clipboard

   Open in CodePen

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
    <a href="#" class="card-link stretched-link">Stretched link</a>
  </div>
</div>

   Copy to clipboard

   Open in CodePen

<div class="d-flex position-relative">
  <img src="../img/200x200.png" alt="" class="me-3">
  <div>
    <h5>Media object</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
    <a href="#" class="stretched-link">Stretched link</a>
  </div>
</div>

   Copy to clipboard

   Open in CodePen

<div class="row">
  <div class="col">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
  </div>
  <div class="col position-relative">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
    <a href="#" class="stretched-link">Stretched link</a>
  </div>
</div>

   Copy to clipboard

   Open in CodePen

<div class="row position-relative">
  <div class="col">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
  </div>
  <div class="col">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
    <a href="#" class="stretched-link">Stretched link</a>
  </div>
</div>