Can I use "Cards image Bootstrap 5.1.3" in commercial projects?

Yes. All GoSnippets are MIT licensed for personal and commercial use without attribution.

Does this snippet include Bootstrap?

This example targets Bootstrap 5. Copy the HTML/CSS/JS into your layout after loading Bootstrap CSS and JS from CDN or npm.

Cards image Bootstrap 5.1.3 — Free Cards Snippet (Bootstrap 5)

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

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Cards snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection