Add a card to your UI with Bootstrap 5 Food Order Card UI Design. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
1<section class="main-content">
2 <div class="container">
3 <h1 class="text-center text-uppercase">Food Order Card</h1>
4 <br>
5 <br>
6 <div class="row">
7 <div class="col-sm-6 col-md-6 col-lg-4">
8 <div class="food-card">
9 <div class="food-card_img">
10 <img src="https://i.imgur.com/eFWRUuR.jpg" alt="">
11 <a href="#!"><i class="far fa-heart"></i></a>
12 </div>
13 <div class="food-card_content">
14 <div class="food-card_title-section">
15 <a href="#!" class="food-card_title">Double Cheese Potato Burger</a>
16 <a href="#!" class="food-card_author">Burger</a>
17 </div>
18 <div class="food-card_bottom-section">
19 <div class="space-between">
20 <div>
21 <span class="fa fa-fire"></span> 220 - 280 Kcal
22 </div>
23 <div class="pull-right">
24 <span class="badge bg-success">Veg</span>
25 </div>
26 </div>
27 <hr>
28 <div class="space-between">
29 <div class="food-card_price">
30 <span>5.99$</span>
31 </div>
32 <div class="food-card_order-count">
33 <div class="input-group mb-3">
34 <div class="">
35 <button class="btn btn-outline-secondary minus-btn" type="button" id="button-addon1"><i class="fa fa-minus"></i></button>
36 </div>
37 <input type="text" class="form-control input-manulator" placeholder="" aria-label="Example text with button addon"
38 aria-describedby="button-addon1" value="0">
39 <div class="">
40 <button class="btn btn-outline-secondary add-btn" type="button" id="button-addon1"><i class="fa fa-plus"></i></button>
41 </div>
42 </div>
43 </div>
44 </div>
45 </div>
46 </div>
47 </div>
48 </div>
49 <div class="col-sm-6 col-md-6 col-lg-6">
50 <div class="food-card food-card--vertical">
51 <div class="food-card_img">
52 <img src="https://i.imgur.com/eFWRUuR.jpg" alt="">
53 <a href="#!"><i class="fa fa-heart"></i></a>
54 </div>
55 <div class="food-card_content">
56 <div class="food-card_title-section">
57 <a href="#!" class="food-card_title">Double Cheese Potato Burger</a>
58 <a href="#!" class="food-card_author">Burger</a>
59 </div>
60 <div class="food-card_bottom-section">
61 <div class="space-between">
62 <div>
63 <span class="fa fa-fire"></span> 220 - 280 Kcal
64 </div>
65 <div class="pull-right">
66 <span class="badge bg-success">Veg</span>
67 </div>
68 </div>
69 <hr>
70 <div class="space-between">
71 <div class="food-card_price">
72 <span>5.99$</span>
73 </div>
74 <div class="food-card_order-count">
75 <div class="input-group mb-3">
76 <div class="">
77 <button class="btn btn-outline-secondary minus-btn" type="button" id="button-addon1"><i class="fa fa-minus"></i></button>
78 </div>
79 <input type="text" class="form-control input-manulator" placeholder="" aria-label="Example text with button addon"
80 aria-describedby="button-addon1" value="0">
81 <div class="">
82 <button class="btn btn-outline-secondary add-btn" type="button" id="button-addon1"><i class="fa fa-plus"></i></button>
83 </div>
84 </div>
85 </div>
86 </div>
87 </div>
88 </div>
89 </div>
90 </div>
91 </div>
92 </div>
93 </section>
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.