Bootstrap 5 Simple user profile cards using pure CSS

Cards Bootstrap 5Free+ CSS

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.

3.5k views47 downloads5 years ago

gosnippets.com/preview/bootstrap-5-simple-user-profile-cards-using-pure-css

Source Code

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>

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<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>