Cards image Bootstrap 5.1.3

Cards Bootstrap 5Free+ CSS

Cards image Bootstrap 5.1.3: a hand-crafted, open-source Bootstrap 5 card. HTML & CSS included, ready to copy.

2.3k views32 downloads4 years ago

gosnippets.com/preview/cards-image-bootstrap-5.1.3

Source Code

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  <!-- by https://hostcwb.com.br/tutoriais/  @diariodeDM1 thanks -->
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    }

More Cards snippets

Bootstrap carousel with cards in 3 columns

Bootstrap carousel with cards in 3 columns: a hand-crafted, open-source Bootstrap 5 card. HTML included, ready to copy.

CardsView →

Bootstrap 5 ecommerce product cards details template

Add a card to your UI with Bootstrap 5 ecommerce product cards details template. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.

CardsView →

Bootstrap snippet Panels with nav tabs using HTML & CSS

Bootstrap snippet Panels with nav tabs using HTML & CSS — a free Bootstrap 5 card snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.

CardsView →

Comments(0)

No comments yet — be the first to start the discussion.

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 }