Forms Bootstrap 5Free+ CSS
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.
11.0k views301 downloads
gosnippets.com/preview/bootstrap-5-checkout-form-with-redeem-code
Source Code
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 More Forms snippets
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.
FormsView →
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.
FormsView →
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.
FormsView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.