Add a card to your UI with Semantic UI Cards with Labels and Tags snippet. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
1<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet" id="bootstrap-css">
2<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>
3<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
4<!------ Include the above in your HEAD tag ---------->
5
6<div class="spacer"></div>
7
8<!-- header -->
9<div class="ui container pad-top-30 pad-bottom-30">
10 <div class="center aligned segment">
11 <div class="ui horizontal divider">Monthly Specials</div>
12 </div>
13</div>
14
15<div class="spacer"></div>
16
17<!-- cards -->
18<div class="ui container">
19 <div class="ui four column grid">
20 <div class="row">
21 <div class="column">
22 <div class="ui card">
23 <div class="image">
24 <a class="ui red right ribbon label">-50%</a>
25 <img src="https://mrpg.scene7.com/is/image/MRP/01_1104170929_SI_11?wid=360&hei=540&qlt=80" />
26 </div>
27 <div class="content">
28 <a class="header">Denim Dress</a>
29 <div class="description">
30 Nec vestibulum eget augue sit vel varius, lacus sem.
31 </div>
32 </div>
33 <div class="extra content">
34 <a class="ui teal tag label">R500</a>
35 </div>
36 </div>
37 </div>
38 <div class="column">
39 <div class="ui card">
40 <div class="image">
41 <a class="ui red right ribbon label">-50%</a>
42 <img src="https://mrpg.scene7.com/is/image/MRP/01_1100211387_SI_11?wid=360&hei=540&qlt=80" />
43 </div>
44 <div class="content">
45 <a class="header">Patterned Tunic</a>
46 <div class="description">
47 Nec vestibulum eget augue sit vel varius, lacus sem.
48 </div>
49 </div>
50 <div class="extra content">
51 <a class="ui teal tag label">R460</a>
52 </div>
53 </div>
54 </div>
55 <div class="column">
56 <div class="ui card">
57 <div class="image">
58 <a class="ui red right ribbon label">-50%</a>
59 <img src="https://mrpg.scene7.com/is/image/MRP/01_1110210428_SI_11?wid=360&hei=540&qlt=80" />
60 </div>
61 <div class="content">
62 <a class="header">Yellow Floral Dress</a>
63 <div class="description">
64 Nec vestibulum eget augue sit vel varius, lacus sem.
65 </div>
66 </div>
67 <div class="extra content">
68 <a class="ui teal tag label">R780</a>
69 </div>
70 </div>
71 </div>
72 <div class="column">
73 <div class="ui card">
74 <div class="image">
75 <a class="ui red right ribbon label">-50%</a>
76 <img src="https://mrpg.scene7.com/is/image/MRP/01_1150210826_SI_11?wid=360&hei=540&qlt=80" />
77 </div>
78 <div class="content">
79 <a class="header">Maroon Bodycon Dress</a>
80 <div class="description">
81 Nec vestibulum eget augue sit vel varius, lacus sem.
82 </div>
83 </div>
84 <div class="extra content">
85 <a class="ui teal tag label">R300</a>
86 </div>
87 </div>
88 </div>
89 </div>
90 </div>
91</div>
92
93<div class="spacer"></div>
94
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.