Add a card to your UI with Bootstrap 5 Need help support Snippets with search. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
1<div class="container mt-4">
2 <div class="row d-flex justify-content-center">
3 <div class="col-md-9">
4 <div class="card p-4 mt-3">
5 <h3 class="heading mt-5 text-center">Hi! How can we help You?</h3>
6 <div class="d-flex justify-content-center px-5">
7 <div class="search"> <input type="text" class="search-input" placeholder="Search..." name=""> <a href="#" class="search-icon"> <i class="fa fa-search"></i> </a> </div>
8 </div>
9 <div class="row mt-4 g-1 px-4 mb-5">
10 <div class="col-md-2">
11 <div class="card-inner p-3 d-flex flex-column align-items-center"> <img src="https://i.imgur.com/Mb8kaPV.png" width="50">
12 <div class="text-center mg-text"> <span class="mg-text">Account</span> </div>
13 </div>
14 </div>
15 <div class="col-md-2">
16 <div class="card-inner p-3 d-flex flex-column align-items-center"> <img src="https://i.imgur.com/ueLEPGq.png" width="50">
17 <div class="text-center mg-text"> <span class="mg-text">Payments</span> </div>
18 </div>
19 </div>
20 <div class="col-md-2">
21 <div class="card-inner p-3 d-flex flex-column align-items-center"> <img src="https://i.imgur.com/tmqv0Eq.png" width="50">
22 <div class="text-center mg-text"> <span class="mg-text">Delivery</span> </div>
23 </div>
24 </div>
25 <div class="col-md-2">
26 <div class="card-inner p-3 d-flex flex-column align-items-center"> <img src="https://i.imgur.com/D0Sm15i.png" width="50">
27 <div class="text-center mg-text"> <span class="mg-text">Product</span> </div>
28 </div>
29 </div>
30 <div class="col-md-2">
31 <div class="card-inner p-3 d-flex flex-column align-items-center"> <img src="https://i.imgur.com/Z7BJ8Po.png" width="50">
32 <div class="text-center mg-text"> <span class="mg-text">Return</span> </div>
33 </div>
34 </div>
35 <div class="col-md-2">
36 <div class="card-inner p-3 d-flex flex-column align-items-center"> <img src="https://i.imgur.com/YLsQrn3.png" width="50">
37 <div class="text-center mg-text"> <span class="mg-text">Guarantee</span> </div>
38 </div>
39 </div>
40 </div>
41 </div>
42 </div>
43 </div>
44</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.
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.