Skip to content

Commit da0fdf3

Browse files
bwsky-abwsky-a
authored
Update README.md
1 parent 102275b commit da0fdf3

File tree

1 file changed

+114
-1
lines changed

1 file changed

+114
-1
lines changed

‎README.md‎

Lines changed: 114 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,114 @@
1-
# bootstrap-address-form
1+
# Bootstrap Address Form - examples & tutorial
2+
3+
Responsive Address Form with Bootstrap 5. Templates include basic examples, use of cards, use of photos & more.
4+
5+
### Basic examples
6+
7+
Simple example of address form on checkout
8+
9+
```html
10+
<div class="row">
11+
<div class="col-md-8 mb-4">
12+
<div class="card mb-4">
13+
<div class="card-header py-3">
14+
<h5 class="mb-0">Biling details</h5>
15+
</div>
16+
<div class="card-body">
17+
<form>
18+
<!-- 2 column grid layout with text inputs for the first and last names -->
19+
<div class="row mb-4">
20+
<div class="col">
21+
<div class="form-outline">
22+
<input type="text" id="form6Example1" class="form-control" />
23+
<label class="form-label" for="form6Example1">First name</label>
24+
</div>
25+
</div>
26+
<div class="col">
27+
<div class="form-outline">
28+
<input type="text" id="form6Example2" class="form-control" />
29+
<label class="form-label" for="form6Example2">Last name</label>
30+
</div>
31+
</div>
32+
</div>
33+
34+
<!-- Text input -->
35+
<div class="form-outline mb-4">
36+
<input type="text" id="form6Example3" class="form-control" />
37+
<label class="form-label" for="form6Example3">Company name</label>
38+
</div>
39+
40+
<!-- Text input -->
41+
<div class="form-outline mb-4">
42+
<input type="text" id="form6Example4" class="form-control" />
43+
<label class="form-label" for="form6Example4">Address</label>
44+
</div>
45+
46+
<!-- Email input -->
47+
<div class="form-outline mb-4">
48+
<input type="email" id="form6Example5" class="form-control" />
49+
<label class="form-label" for="form6Example5">Email</label>
50+
</div>
51+
52+
<!-- Number input -->
53+
<div class="form-outline mb-4">
54+
<input type="number" id="form6Example6" class="form-control" />
55+
<label class="form-label" for="form6Example6">Phone</label>
56+
</div>
57+
58+
<!-- Message input -->
59+
<div class="form-outline mb-4">
60+
<textarea class="form-control" id="form6Example7" rows="4"></textarea>
61+
<label class="form-label" for="form6Example7">Additional information</label>
62+
</div>
63+
64+
<!-- Checkbox -->
65+
<div class="form-check d-flex justify-content-center mb-2">
66+
<input class="form-check-input me-2" type="checkbox" value="" id="form6Example8"
67+
checked />
68+
<label class="form-check-label" for="form6Example8">
69+
Create an account?
70+
</label>
71+
</div>
72+
</form>
73+
</div>
74+
</div>
75+
</div>
76+
77+
<div class="col-md-4 mb-4">
78+
<div class="card mb-4">
79+
<div class="card-header py-3">
80+
<h5 class="mb-0">Summary</h5>
81+
</div>
82+
<div class="card-body">
83+
<ul class="list-group list-group-flush">
84+
<li
85+
class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 pb-0">
86+
Products
87+
<span>$53.98</span>
88+
</li>
89+
<li class="list-group-item d-flex justify-content-between align-items-center px-0">
90+
Shipping
91+
<span>Gratis</span>
92+
</li>
93+
<li
94+
class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 mb-3">
95+
<div>
96+
<strong>Total amount</strong>
97+
<strong>
98+
<p class="mb-0">(including VAT)</p>
99+
</strong>
100+
</div>
101+
<span><strong>$53.98</strong></span>
102+
</li>
103+
</ul>
104+
105+
<button type="button" class="btn btn-primary btn-lg btn-block">
106+
Make purchase
107+
</button>
108+
</div>
109+
</div>
110+
</div>
111+
</div>
112+
```
113+
114+
#### You can see more customization examples on the [📄 Address Form documentation page](https://mdbootstrap.com/docs/standard/extended/bootstrap-address-form/)

0 commit comments

Comments
 (0)