Cards de imagens com bootstrap 5.1.3

Cards de imagens com bootstrap 5.1.3

Cards dão um charme no site e chamam a atenção dos visitantes por serem muito bonitos.

  <style>
    .bigIcon {
      font-size: 5em;
    }

    .my-circle {
      width: 50px;
      height: 50px;
      text-align: center;
      vertical-align: middle;
    }
  </style>

  <div class="container-full mt-3">
    <div class="row g-3 mx-0">
      <div class="col-12 col-sm-6 col-lg-4">
        <div class="position-relative bg-light border shadow h-100 mt-3">
          <i class="position-absolute top-0 end-0 bi bi-star-fill text-warning pe-1 fs-3"></i>
          <button class="position-absolute top-0 start-50 translate-middle rounded-circle btn btn-info  my-circle">1</button>
          <img src="https://picsum.photos/100/75" class="card-img-top" alt="Card Image">
          <h5 class="p-3">Image title</h5>
          <p class="card-text mb-4 border-bottom p-3">
            is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
            has </p>
          <div class="position-absolute bottom-0 end-0 p-3">image by  <a href="#">https://picsum.photos</a></div>
        </div>
      </div>

      <div class="col-12 col-sm-6 col-lg-4">
        <div class="position-relative bg-light border shadow h-100 mt-3">
          <i class="position-absolute top-0 end-0 bi bi-star-fill text-warning pe-1 fs-3"></i>
          <button class="position-absolute top-0 start-50 translate-middle rounded-circle btn btn-info  my-circle">2</button>
          <img src="https://picsum.photos/100/74" class="card-img-top" alt="Card Image">
          <h5 class="p-3">Image title</h5>
          <p class="card-text mb-4 border-bottom p-3">
            opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' </p>
            <div class="position-absolute bottom-0 end-0 p-3">image by  <a href="#">https://picsum.photos</a></div>
        </div>
      </div>

      <div class="col-12 col-sm-6 col-lg-4">
        <div class="position-relative bg-light border shadow h-100 mt-3">
          <i class="position-absolute top-0 end-0 bi bi-star-fill text-warning pe-1 fs-3"></i>
          <button class="position-absolute top-0 start-50 translate-middle rounded-circle btn btn-info  my-circle">3</button>
          <img src="https://picsum.photos/100/73" class="card-img-top" alt="Card Image">
          <h5 class="p-3">Image title</h5>
          <p class="card-text mb-4 border-bottom p-3">
            is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
            has </p>
          <div class="position-absolute bottom-0 end-0 p-3">image by  <a href="#">https://picsum.photos</a></div>
        </div>
      </div>

      <div class="col-12 col-sm-6 col-lg-4">
        <div class="position-relative bg-light border shadow h-100 mt-3">
          <i class="position-absolute top-0 end-0 bi bi-star-fill text-warning pe-1 fs-3"></i>
          <button class="position-absolute top-0 start-50 translate-middle rounded-circle btn btn-info  my-circle">4</button>
          <img src="https://picsum.photos/100/76" class="card-img-top" alt="Card Image">
          <h5 class="p-3">Image title</h5>
          <p class="card-text mb-4 border-bottom p-3">
            is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
            has </p>
          <div class="position-absolute bottom-0 end-0 p-3">image by  <a href="#">https://picsum.photos</a></div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-lg-4">
        <div class="position-relative bg-light border shadow h-100 mt-3">
          <i class="position-absolute top-0 end-0 bi bi-star-fill text-warning pe-1 fs-3"></i>
          <button class="position-absolute top-0 start-50 translate-middle rounded-circle btn btn-info  my-circle">5</button>
          <img src="https://picsum.photos/100/76" class="card-img-top" alt="Card Image">
          <h5 class="p-3">Image title</h5>
          <p class="card-text mb-4 border-bottom p-3">
            is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
            has </p>
          <div class="position-absolute bottom-0 end-0 p-3">image by  <a href="#">https://picsum.photos</a></div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-lg-4">
        <div class="position-relative bg-light border shadow h-100 mt-3">
          <i class="position-absolute top-0 end-0 bi bi-star-fill text-warning pe-1 fs-3"></i>
          <button class="position-absolute top-0 start-50 translate-middle rounded-circle btn btn-info  my-circle">6</button>
          <img src="https://picsum.photos/100/76" class="card-img-top" alt="Card Image">
          <h5 class="p-3">Image title</h5>
          <p class="card-text mb-4 border-bottom p-3">
            is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
            has </p>
          <div class="position-absolute bottom-0 end-0 p-3">image by  <a href="#">https://picsum.photos</a></div>
        </div>
      </div>

    </div>
  </div>
  <br>
<hr class="m-3">