Free Bootstrap 5 utility snippet — Beautiful profile UI with transparent background. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
1<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap" rel="stylesheet">
2<div id="background">
3 <div id="circle">
4 <div id="circle-glow"></div>
5 <div id="circle-inner"></div>
6 </div>
7</div>
8
9<div id="app">
10 <div id="profiles">
11 <div class="profile">
12 <div class="profile-content">
13 <div class="profile-pic">
14 <img class="profile-pic-image" src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8cGVvcGxlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500" />
15 </div>
16 <h3 class="profile-name">ANDY</h3>
17 </div>
18 </div>
19 <div class="profile">
20 <div class="profile-content">
21 <div class="profile-pic">
22 <img class="profile-pic-image" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cGVvcGxlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500" />
23 </div>
24 <h3 class="profile-name">OLIVIA</h3>
25 </div>
26 </div>
27 <div class="profile">
28 <div class="profile-content">
29 <div class="profile-pic">
30 <img class="profile-pic-image" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fHBlb3BsZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500" />
31 </div>
32 <h3 class="profile-name">NOAH</h3>
33 </div>
34 </div>
35 <div class="profile">
36 <div class="profile-content">
37 <div class="profile-pic">
38 <img class="profile-pic-image" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzB8fHBlb3BsZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500" />
39 </div>
40 <h3 class="profile-name">EMMA</h3>
41 </div>
42 </div>
43 <div class="profile">
44 <div class="profile-content">
45 <div class="profile-pic">
46 <img class="profile-pic-image" src="https://images.unsplash.com/photo-1522529599102-193c0d76b5b6?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mzh8fHBlb3BsZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500" />
47 </div>
48 <h3 class="profile-name">ELIJAH</h3>
49 </div>
50 </div>
51 <div class="profile">
52 <div class="profile-content">
53 <div class="profile-pic">
54 <img class="profile-pic-image" src="https://images.unsplash.com/photo-1534083220759-4c3c00112ea0?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGNoaW5lc2UlMjB3b21lbnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500" />
55 </div>
56 <h3 class="profile-name">AVA</h3>
57 </div>
58 </div>
59 <div class="profile">
60 <div class="profile-content">
61 <div class="profile-pic">
62 <img class="profile-pic-image" src="https://images.unsplash.com/photo-1512663150964-d8f43c899f76?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTQ3fHxwZW9wbGV8ZW58MHx8MHx8&auto=format&fit=crop&w=500" />
63 </div>
64 <h3 class="profile-name">HENRY</h3>
65 </div>
66 </div>
67 </div>
68</div>
Auto move mouse cursor snippet
Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.
Bootstrap 5 Ecommerce Product Detail Page Design snippet
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Bootstrap 5 Ecommerce single product page design template
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.