Recreation: Card theme radio switcher snippet: a hand-crafted, open-source Bootstrap 5 card. HTML & CSS included, ready to copy.
1<div class="container">
2 <div class="option">
3 <input type="radio" name="card" id="silver" value="silver">
4 <label for="silver" aria-label="Silver">
5 <span></span>
6
7 Silver
8
9 <div class="card card--white card--sm">
10 <div class="card__chip"></div>
11 <div class="card__content">
12 <div class="card__text">
13 <div class="text__row">
14 <div class="text__loader"></div>
15 <div class="text__loader"></div>
16 </div>
17 <div class="text__row">
18 <div class="text__loader"></div>
19 <div class="text__loader"></div>
20 </div>
21 </div>
22 <div class="card__symbol">
23 <span></span>
24 <span></span>
25 </div>
26 </div>
27 </div>
28 </label>
29 </div>
30
31 <div class="option">
32 <input type="radio" name="card" id="royal" value="royal">
33 <label for="royal" aria-label="Royal blue">
34 <span></span>
35
36 Royal blue
37
38 <div class="card card--blue card--sm">
39 <div class="card__chip"></div>
40 <div class="card__content">
41 <div class="card__text">
42 <div class="text__row">
43 <div class="text__loader"></div>
44 <div class="text__loader"></div>
45 </div>
46 <div class="text__row">
47 <div class="text__loader"></div>
48 <div class="text__loader"></div>
49 </div>
50 </div>
51 <div class="card__symbol">
52 <span></span>
53 <span></span>
54 </div>
55 </div>
56 </div>
57 </label>
58 </div>
59
60 <div class="option">
61 <input type="radio" name="card" id="dark" value="dark">
62 <label for="dark" aria-label="Dark grey">
63 <span></span>
64
65 Dark grey
66
67 <div class="card card--dark card--sm">
68 <div class="card__chip"></div>
69 <div class="card__content">
70 <div class="card__text">
71 <div class="text__row">
72 <div class="text__loader"></div>
73 <div class="text__loader"></div>
74 </div>
75 <div class="text__row">
76 <div class="text__loader"></div>
77 <div class="text__loader"></div>
78 </div>
79 </div>
80 <div class="card__symbol">
81 <span></span>
82 <span></span>
83 </div>
84 </div>
85 </div>
86 </label>
87 </div>
88</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.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.