Cards image Bootstrap 5.1.3

Loading…

1<!DOCTYPE html> 2<html lang="pt-br" dir="ltr"> 3 4<head> 5 <meta charset="utf-8"> 6 <title></title> 7<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> 8 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"> 9 10</head> 11 12<body> 13  14 15 <div class="container-full mt-3"> 16 <div class="row g-3 mx-0"> 17 <div class="col-12 col-sm-6 col-lg-4"> 18 <div class="position-relative bg-light border shadow h-100 mt-3"> 19 <i class="position-absolute top-0 end-0 bi bi-star-fill text-warning pe-1 fs-3"></i> 20 <button class="position-absolute top-0 start-50 translate-middle rounded-circle btn btn-info my-circle">1</button> 21 <img src="https://picsum.photos/100/75" class="card-img-top" alt="Card Image"> 22 <h5 class="p-3">Image title</h5> 23 <p class="card-text mb-4 border-bottom p-3"> 24 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 25 has </p> 26 <div class="position-absolute bottom-0 end-0 p-3">image by <a href="#">https://picsum.photos</a></div> 27 </div> 28 </div> 29 30 <div class="col-12 col-sm-6 col-lg-4"> 31 <div class="position-relative bg-light border shadow h-100 mt-3"> 32 <i class="position-absolute top-0 end-0 bi bi-star-fill text-warning pe-1 fs-3"></i> 33 <button class="position-absolute top-0 start-50 translate-middle rounded-circle btn btn-info my-circle">2</button> 34 <img src="https://picsum.photos/100/74" class="card-img-top" alt="Card Image"> 35 <h5 class="p-3">Image title</h5> 36 <p class="card-text mb-4 border-bottom p-3"> 37 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> 38 <div class="position-absolute bottom-0 end-0 p-3">image by <a href="#">https://picsum.photos</a></div> 39 </div> 40 </div> 41 42 <div class="col-12 col-sm-6 col-lg-4"> 43 <div class="position-relative bg-light border shadow h-100 mt-3"> 44 <i class="position-absolute top-0 end-0 bi bi-star-fill text-warning pe-1 fs-3"></i> 45 <button class="position-absolute top-0 start-50 translate-middle rounded-circle btn btn-info my-circle">3</button> 46 <img src="https://picsum.photos/100/73" class="card-img-top" alt="Card Image"> 47 <h5 class="p-3">Image title</h5> 48 <p class="card-text mb-4 border-bottom p-3"> 49 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 50 has </p> 51 <div class="position-absolute bottom-0 end-0 p-3">image by <a href="#">https://picsum.photos</a></div> 52 </div> 53 </div> 54 55 <div class="col-12 col-sm-6 col-lg-4"> 56 <div class="position-relative bg-light border shadow h-100 mt-3"> 57 <i class="position-absolute top-0 end-0 bi bi-star-fill text-warning pe-1 fs-3"></i> 58 <button class="position-absolute top-0 start-50 translate-middle rounded-circle btn btn-info my-circle">4</button> 59 <img src="https://picsum.photos/100/76" class="card-img-top" alt="Card Image"> 60 <h5 class="p-3">Image title</h5> 61 <p class="card-text mb-4 border-bottom p-3"> 62 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 63 has </p> 64 <div class="position-absolute bottom-0 end-0 p-3">image by <a href="#">https://picsum.photos</a></div> 65 </div> 66 </div> 67 <div class="col-12 col-sm-6 col-lg-4"> 68 <div class="position-relative bg-light border shadow h-100 mt-3"> 69 <i class="position-absolute top-0 end-0 bi bi-star-fill text-warning pe-1 fs-3"></i> 70 <button class="position-absolute top-0 start-50 translate-middle rounded-circle btn btn-info my-circle">5</button> 71 <img src="https://picsum.photos/100/76" class="card-img-top" alt="Card Image"> 72 <h5 class="p-3">Image title</h5> 73 <p class="card-text mb-4 border-bottom p-3"> 74 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 75 has </p> 76 <div class="position-absolute bottom-0 end-0 p-3">image by <a href="#">https://picsum.photos</a></div> 77 </div> 78 </div> 79 <div class="col-12 col-sm-6 col-lg-4"> 80 <div class="position-relative bg-light border shadow h-100 mt-3"> 81 <i class="position-absolute top-0 end-0 bi bi-star-fill text-warning pe-1 fs-3"></i> 82 <button class="position-absolute top-0 start-50 translate-middle rounded-circle btn btn-info my-circle">6</button> 83 <img src="https://picsum.photos/100/76" class="card-img-top" alt="Card Image"> 84 <h5 class="p-3">Image title</h5> 85 <p class="card-text mb-4 border-bottom p-3"> 86 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 87 has </p> 88 <div class="position-absolute bottom-0 end-0 p-3">image by <a href="#">https://picsum.photos</a></div> 89 </div> 90 </div> 91 92 </div> 93 </div> 94 <br> 95<hr class="m-3"> 96</body> 97 98</html> 99 100 }

Cards image Bootstrap 5.1.3

Source Code

More Cards snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery