Free Bootstrap 5 card snippet — Bootstrap 5 Simple user profile cards using pure CSS. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
1<div class="container">
2 <div class="row">
3 <div class="col-lg-4">
4 <div class="card p-0">
5 <div class="card-image"> <img src="https://images.pexels.com/photos/2746187/pexels-photo-2746187.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""> </div>
6 <div class="card-content d-flex flex-column align-items-center">
7 <h4 class="pt-2">SomeOne Famous</h4>
8 <h5>Creative Desinger</h5>
9 <ul class="social-icons d-flex justify-content-center">
10 <li style="--i:1"> <a href="#"> <span class="fab fa-facebook"></span> </a> </li>
11 <li style="--i:2"> <a href="#"> <span class="fab fa-twitter"></span> </a> </li>
12 <li style="--i:3"> <a href="#"> <span class="fab fa-instagram"></span> </a> </li>
13 </ul>
14 </div>
15 </div>
16 </div>
17 <div class="col-lg-4">
18 <div class="card p-0">
19 <div class="card-image"> <img src="https://images.pexels.com/photos/381843/pexels-photo-381843.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""> </div>
20 <div class="card-content d-flex flex-column align-items-center">
21 <h4 class="pt-2">SomeOne Famous</h4>
22 <h5>Creative Desinger</h5>
23 <ul class="social-icons d-flex justify-content-center">
24 <li style="--i:1"> <a href="#"> <span class="fab fa-facebook"></span> </a> </li>
25 <li style="--i:2"> <a href="#"> <span class="fab fa-twitter"></span> </a> </li>
26 <li style="--i:3"> <a href="#"> <span class="fab fa-instagram"></span> </a> </li>
27 </ul>
28 </div>
29 </div>
30 </div>
31 <div class="col-lg-4">
32 <div class="card p-0">
33 <div class="card-image"> <img src="https://images.pexels.com/photos/139829/pexels-photo-139829.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""> </div>
34 <div class="card-content d-flex flex-column align-items-center">
35 <h4 class="pt-2">SomeOne Famous</h4>
36 <h5>Creative Desinger</h5>
37 <ul class="social-icons d-flex justify-content-center">
38 <li style="--i:1"> <a href="#"> <span class="fab fa-facebook"></span> </a> </li>
39 <li style="--i:2"> <a href="#"> <span class="fab fa-twitter"></span> </a> </li>
40 <li style="--i:3"> <a href="#"> <span class="fab fa-instagram"></span> </a> </li>
41 </ul>
42 </div>
43 </div>
44 </div>
45 </div>
46</div>
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.
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.
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.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
57
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.