Add a form to your UI with Bootstrap 5 checkout form with redeem code. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
1<main>
2 <div class="py-5 text-center">
3 <h2>Checkout form</h2>
4 </div>
5 <div class="row g-5">
6 <div class="col-md-5 col-lg-4 order-md-last">
7 <h4 class="d-flex justify-content-between align-items-center mb-3">
8 <span class="text-primary">Your cart</span>
9 <span class="badge bg-primary rounded-pill">3</span>
10 </h4>
11 <ul class="list-group mb-3">
12 <li class="list-group-item d-flex justify-content-between lh-sm">
13 <div>
14 <h6 class="my-0">Nike jeans</h6>
15 <small class="text-muted">Best Quality</small>
16 </div>
17 <span class="text-muted">₹500</span>
18 </li>
19 <li class="list-group-item d-flex justify-content-between lh-sm">
20 <div>
21 <h6 class="my-0">Shoe from bata</h6>
22 <small class="text-muted">Best product</small>
23 </div>
24 <span class="text-muted">₹1000</span>
25 </li>
26 <li class="list-group-item d-flex justify-content-between lh-sm">
27 <div>
28 <h6 class="my-0">Focut shirt </h6>
29 <small class="text-muted">Ladki pat jayegi</small>
30 </div>
31 <span class="text-muted">₹500</span>
32 </li>
33 <li class="list-group-item d-flex justify-content-between bg-light">
34 <div class="text-success">
35 <h6 class="my-0">Promo code</h6>
36 <small>SALE500</small>
37 </div>
38 <span class="text-success">−₹500</span>
39 </li>
40 <li class="list-group-item d-flex justify-content-between">
41 <span>Total (Rupee)</span>
42 <strong>₹1500</strong>
43 </li>
44 </ul>
45
46 <form class="card p-2">
47 <div class="input-group">
48 <input type="text" class="form-control" placeholder="Promo code">
49 <button type="submit" class="btn btn-danger">Redeem</button>
50 </div>
51 </form>
52 </div>
53 <div class="col-md-7 col-lg-8">
54 <h4 class="mb-3">Billing address</h4>
55 <form class="needs-validation" novalidate>
56 <div class="row g-3">
57 <div class="col-sm-6">
58 <label for="firstName" class="form-label">First name</label>
59 <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
60 <div class="invalid-feedback">
61 Valid first name is required.
62 </div>
63 </div>
64
65 <div class="col-sm-6">
66 <label for="lastName" class="form-label">Last name</label>
67 <input type="text" class="form-control" id="lastName" placeholder="" value="" required>
68 <div class="invalid-feedback">
69 Valid last name is required.
70 </div>
71 </div>
72
73
74 <div class="col-12">
75 <label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label>
76 <input type="email" class="form-control" id="email" placeholder="you@example.com">
77 <div class="invalid-feedback">
78 Please enter a valid email address for shipping updates.
79 </div>
80 </div>
81
82 <div class="col-12">
83 <label for="address" class="form-label">Address</label>
84 <input type="text" class="form-control" id="address" placeholder="Plaza street" required>
85 <div class="invalid-feedback">
86 Please enter your shipping address.
87 </div>
88 </div>
89
90 <div class="col-12">
91 <label for="address2" class="form-label">Address 2 <span class="text-muted">(Optional)</span></label>
92 <input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
93 </div>
94
95 <div class="col-md-5">
96 <label for="country" class="form-label">Country</label>
97 <select class="form-select" id="country" required>
98 <option value="">Choose...</option>
99 <option>India</option>
100 </select>
101 <div class="invalid-feedback">
102 Please select a valid country.
103 </div>
104 </div>
105
106 <div class="col-md-4">
107 <label for="state" class="form-label">State</label>
108 <select class="form-select" id="state" required>
109 <option value="">Choose...</option>
110 <option>Delhi</option>
111 </select>
112 <div class="invalid-feedback">
113 Please provide a valid state.
114 </div>
115 </div>
116
117 <div class="col-md-3">
118 <label for="zip" class="form-label">Zip</label>
119 <input type="text" class="form-control" id="zip" placeholder="" required>
120 <div class="invalid-feedback">
121 Zip code required.
122 </div>
123 </div>
124 </div>
125
126 <hr class="my-4">
127
128 <div class="form-check">
129 <input type="checkbox" class="form-check-input" id="same-address">
130 <label class="form-check-label" for="same-address">Shipping address is the same as my billing address</label>
131 </div>
132
133 <div class="form-check">
134 <input type="checkbox" class="form-check-input" id="save-info">
135 <label class="form-check-label" for="save-info">Save this information for next time</label>
136 </div>
137
138 <hr class="my-4">
139
140 <h4 class="mb-3">Payment</h4>
141
142 <div class="my-3">
143 <div class="form-check">
144 <input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
145 <label class="form-check-label" for="credit">Credit card</label>
146 </div>
147 <div class="form-check">
148 <input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
149 <label class="form-check-label" for="debit">Debit card</label>
150 </div>
151 <div class="form-check">
152 <input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
153 <label class="form-check-label" for="paypal">Paytm</label>
154 </div>
155 <div class="form-check">
156 <input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
157 <label class="form-check-label" for="paypal">Phonepe</label>
158 </div>
159 </div>
160
161 <div class="row gy-3">
162 <div class="col-md-6">
163 <label for="cc-name" class="form-label">Name on card</label>
164 <input type="text" class="form-control" id="cc-name" placeholder="" required>
165 <small class="text-muted">Full name as displayed on card</small>
166 <div class="invalid-feedback">
167 Name on card is required
168 </div>
169 </div>
170
171 <div class="col-md-6">
172 <label for="cc-number" class="form-label">Credit card number</label>
173 <input type="text" class="form-control" id="cc-number" placeholder="" required>
174 <div class="invalid-feedback">
175 Credit card number is required
176 </div>
177 </div>
178
179 <div class="col-md-3">
180 <label for="cc-expiration" class="form-label">Expiration</label>
181 <input type="text" class="form-control" id="cc-expiration" placeholder="" required>
182 <div class="invalid-feedback">
183 Expiration date required
184 </div>
185 </div>
186
187 <div class="col-md-3">
188 <label for="cc-cvv" class="form-label">CVV</label>
189 <input type="text" class="form-control" id="cc-cvv" placeholder="" required>
190 <div class="invalid-feedback">
191 Security code required
192 </div>
193 </div>
194 </div>
195
196 <hr class="my-4">
197
198 <button class="w-100 btn btn-danger btn-lg" type="submit">Continue to checkout</button>
199 </form>
200 </div>
201 </div>
202 </main>
203
204
205
206
207 
Bootstrap 5 simple login form with social login
Free Bootstrap 5 form snippet — Bootstrap 5 simple login form with social login. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Bootstrap 5 Login Form UI Design snippets
Bootstrap 5 Login Form UI Design snippets: a hand-crafted, open-source Bootstrap 5 form. HTML & CSS included, ready to copy.
Bootstrap 5 Fancy user login form snippets
Free Bootstrap 5 form snippet — Bootstrap 5 Fancy user login form snippets. Preview, copy HTML & CSS, drop it into any 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.
Immerse in a modern audio experience with our neumorphic music player, featuring a dynamic waveform scrubber and interactive queue visuals.
Revolutionize your AI interactions with this stunning, neon-infused chat interface. With dynamic status indicators and orbital animations, it captivates and informs.
Craft seamless schedules with an elegant neumorphic interface where you can drag and select time ranges effortlessly in a futuristic calendar view.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.