Cards Bootstrap 5Free+ CSS+ JS
Expanding flex cards with animation — a free Bootstrap 5 card snippet. Copy the HTML, CSS & JS and paste straight into your Bootstrap 5 project.
7.1k views190 downloads
gosnippets.com/preview/expanding-flex-cards-with-animation
Source Code
1<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css'>
2<link rel='stylesheet' href='https://static.fontawesome.com/css/fontawesome-app.css'>
3<link rel='stylesheet' href='https://pro.fontawesome.com/releases/v5.2.0/css/all.css'>
4<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,700'>
5
6<div class="options">
7 <div class="option active" style="--optionBackground:url(https://66.d-flex.tumblr.com/6fb397d822f4f9f4596dff2085b18f2e/tumblr_nzsvb4p6xS1qho82wo1_1280.jpg);">
8 <div class="shadow"></div>
9 <div class="label">
10 <div class="icon">
11 <i class="fas fa-walking"></i>
12 </div>
13 <div class="info">
14 <div class="main">Blonkisoaz</div>
15 <div class="sub">Omuke trughte a otufta</div>
16 </div>
17 </div>
18 </div>
19 <div class="option" style="--optionBackground:url(https://66.d-flex.tumblr.com/8b69cdde47aa952e4176b4200052abf4/tumblr_o51p7mFFF21qho82wo1_1280.jpg);">
20 <div class="shadow"></div>
21 <div class="label">
22 <div class="icon">
23 <i class="fas fa-snowflake"></i>
24 </div>
25 <div class="info">
26 <div class="main">Oretemauw</div>
27 <div class="sub">Omuke trughte a otufta</div>
28 </div>
29 </div>
30 </div>
31 <div class="option" style="--optionBackground:url(https://66.d-flex.tumblr.com/5af3f8303456e376ceda1517553ba786/tumblr_o4986gakjh1qho82wo1_1280.jpg);">
32 <div class="shadow"></div>
33 <div class="label">
34 <div class="icon">
35 <i class="fas fa-tree"></i>
36 </div>
37 <div class="info">
38 <div class="main">Iteresuselle</div>
39 <div class="sub">Omuke trughte a otufta</div>
40 </div>
41 </div>
42 </div>
43 <div class="option" style="--optionBackground:url(https://66.d-flex.tumblr.com/5516a22e0cdacaa85311ec3f8fd1e9ef/tumblr_o45jwvdsL11qho82wo1_1280.jpg);">
44 <div class="shadow"></div>
45 <div class="label">
46 <div class="icon">
47 <i class="fas fa-tint"></i>
48 </div>
49 <div class="info">
50 <div class="main">Idiefe</div>
51 <div class="sub">Omuke trughte a otufta</div>
52 </div>
53 </div>
54 </div>
55 <div class="option" style="--optionBackground:url(https://66.d-flex.tumblr.com/f19901f50b79604839ca761cd6d74748/tumblr_o65rohhkQL1qho82wo1_1280.jpg);">
56 <div class="shadow"></div>
57 <div class="label">
58 <div class="icon">
59 <i class="fas fa-sun"></i>
60 </div>
61 <div class="info">
62 <div class="main">Inatethi</div>
63 <div class="sub">Omuke trughte a otufta</div>
64 </div>
65 </div>
66 </div>
67</div>
68Tags
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.
Sign in to join the conversation.