Address Form
Bootstrap Address Form - examples & tutorial
Responsive Address Form with Bootstrap 5. Templates include basic examples, use of cards, use of photos & more.
Basic examples
Simple example of address form on checkout
Biling details
Summary
- Products $53.98
- Shipping Gratis
-
Total amount$53.98
(including VAT)
<div class="row">
<div class="col-md-8 mb-4">
<div class="card mb-4">
<div class="card-header py-3">
<h5 class="mb-0">Biling details</h5>
</div>
<div class="card-body">
<form>
<!-- 2 column grid layout with text inputs for the first and last names -->
<div class="row mb-4">
<div class="col">
<div class="form-outline">
<input type="text" id="form6Example1" class="form-control" />
<label class="form-label" for="form6Example1">First name</label>
</div>
</div>
<div class="col">
<div class="form-outline">
<input type="text" id="form6Example2" class="form-control" />
<label class="form-label" for="form6Example2">Last name</label>
</div>
</div>
</div>
<!-- Text input -->
<div class="form-outline mb-4">
<input type="text" id="form6Example3" class="form-control" />
<label class="form-label" for="form6Example3">Company name</label>
</div>
<!-- Text input -->
<div class="form-outline mb-4">
<input type="text" id="form6Example4" class="form-control" />
<label class="form-label" for="form6Example4">Address</label>
</div>
<!-- Email input -->
<div class="form-outline mb-4">
<input type="email" id="form6Example5" class="form-control" />
<label class="form-label" for="form6Example5">Email</label>
</div>
<!-- Number input -->
<div class="form-outline mb-4">
<input type="number" id="form6Example6" class="form-control" />
<label class="form-label" for="form6Example6">Phone</label>
</div>
<!-- Message input -->
<div class="form-outline mb-4">
<textarea class="form-control" id="form6Example7" rows="4"></textarea>
<label class="form-label" for="form6Example7">Additional information</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-2">
<input class="form-check-input me-2" type="checkbox" value="" id="form6Example8"
checked />
<label class="form-check-label" for="form6Example8">
Create an account?
</label>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card mb-4">
<div class="card-header py-3">
<h5 class="mb-0">Summary</h5>
</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li
class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 pb-0">
Products
<span>$53.98</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center px-0">
Shipping
<span>Gratis</span>
</li>
<li
class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 mb-3">
<div>
<strong>Total amount</strong>
<strong>
<p class="mb-0">(including VAT)</p>
</strong>
</div>
<span><strong>$53.98</strong></span>
</li>
</ul>
<button type="button" class="btn btn-primary btn-lg btn-block">
Make purchase
</button>
</div>
</div>
</div>
</div>
Delivery address form card
Example of using address form with a card
Welcome
You are 30 seconds away from compleating your order!
Delivery Details
<div class="row mt-3 mx-3" style="margin-top:25px ;">
<div class="col-md-3">
<div style="margin-top: 50px; margin-left: 10px;" class="text-center">
<i id="animationDemo" data-mdb-animation="slide-right" data-mdb-toggle="animation"
data-mdb-animation-reset="true" data-mdb-animation-start="onScroll"
data-mdb-animation-on-scroll="repeat" class="fas fa-3x fa-shipping-fast text-white"></i>
<h3 class="mt-3 text-white">Welcome</h3>
<p class="white-text">You are 30 seconds away from compleating your order!</p>
</div>
<div class="text-center">
<button type="submit" class="btn btn-white btn-rounded back-button">Go back</button>
</div>
</div>
<div class="col-md-9 justify-content-center">
<div class="card card-custom pb-4">
<div class="card-body mt-0 mx-5">
<div class="text-center mb-3 pb-2 mt-3">
<h4 style="color: #495057 ;">Delivery Details</h4>
</div>
<form class="mb-0">
<div class="row mb-4">
<div class="col">
<div class="form-outline">
<input type="text" id="form6Example1" class="form-control input-custom" />
<label class="form-label" for="form6Example1">First name</label>
</div>
</div>
<div class="col">
<div class="form-outline">
<input type="text" id="form6Example2" class="form-control input-custom" />
<label class="form-label" for="form6Example2">Last name</label>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col">
<div class="form-outline">
<input type="text" id="form6Example3" class="form-control input-custom" />
<label class="form-label" for="form6Example3">City</label>
</div>
</div>
<div class="col">
<div class="form-outline">
<input type="text" id="form6Example4" class="form-control input-custom" />
<label class="form-label" for="form6Example4">Zip</label>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col">
<div class="form-outline">
<input type="text" id="form6Example6" class="form-control input-custom" />
<label class="form-label" for="form6Example6">Address</label>
</div>
</div>
<div class="col">
<div class="form-outline">
<input type="email" id="typeEmail" class="form-control input-custom" />
<label class="form-label" for="typeEmail">Email</label>
</div>
</div>
</div>
<div class="float-end ">
<!-- Submit button -->
<button type="submit" class="btn btn-primary btn-rounded"
style="background-color: #0062CC ;">Place order</button>
</div>
</form>
</div>
</div>
</div>
</div>
.gradient-custom {
background: -webkit-linear-gradient(left, #3931af, #00c6ff);
}
.card-custom {
border-top-left-radius: 10% 50%;
border-bottom-left-radius: 10% 50%;
background-color: #f8f9fa ;
}
.input-custom {
background-color: white ;
}
.white-text {
color: hsl(52, 0%, 98%);
font-weight: 100 ;
font-size: 14px;
}
.back-button {
background-color: hsl(52, 0%, 98%);
font-weight: 700;
color: black ;
margin-top: 50px ;
}
Advanced address form
Delivery Country:
Email address
your-email@gmail.com
1 item Edit
$35.00
Denim jacket
Black UK 8Qty:1
Delivery address
<div class="container my-5 py-5">
<!--Section: Design Block-->
<section>
<div class="row">
<div class="col-md-8">
<div class="card mb-4">
<div class="card-body">
<p class="text-uppercase h4 text-font">Delivery Country:</p>
<div class="row">
<div class="col-md-1">
<img src="https://mdbootstrap.com/img/Others/extended-example/usa2.webp"
class="rounded-circle me-2" style="width: 35px;" alt="" />
</div>
<div class="col-md-8">
<select class="select">
<option value="1">United States</option>
<option value="2">Spain</option>
<option value="3">Poland</option>
<option value="4">Italy</option>
<option value="5">Greece</option>
<option value="6">Germany</option>
<option value="7">Croatia</option>
<option value="8">Sweden</option>
</select>
</div>
</div>
</div>
</div>
<div class="card mb-4 accordion" id="accordionExample">
<div class="card body accordion-item">
<h2 class="accordion-header" id="headingOne">
<div class="accordion-button collapsed text-uppercase text-font h4" type="button"
data-mdb-toggle="collapse" data-mdb-target="#collapseOne" aria-expanded="false"
aria-controls="collapseOne">
Promo/Student Code or Vouchers
</div>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
data-mdb-parent="#accordionExample">
<div class="accordion-body">
<div class="form-outline d-flex">
<input type="text" id="form1" class="form-control" />
<label class="form-label" for="form1">Enter code</label>
</div>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="card-body">
<p class="text-uppercase fw-bold mb-3 text-font">Email address</p>
<div class="row">
<div class="col-md-4">
<p>your-email@gmail.com</p>
</div>
<div class="col-md-7">
<button type="button" class="btn btn-outline-dark float-end button-color "
data-mdb-ripple-color="dark">
Change
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-4 position-static">
<div class="card mb-4">
<div class="card-header py-3">
<h5 class="mb-0 text-font">1 item <span class="float-end mt-1"
style="font-size: 13px ;">Edit</span></h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-4">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.webp"
class="rounded-3" style="width: 100px;" alt="" />
</div>
<div class="col-md-6 ms-3">
<span class="mb-0 text-price">$35.00</span>
<p class="mb-0 text-descriptions">Denim jacket </p>
<span class="text-descriptions fw-bold">Black</span> <span
class="text-descriptions fw-bold">UK 8</span>
<p class="text-descriptions mt-0">Qty:<span
class="text-descriptions fw-bold">1</span>
</p>
</div>
</div>
<div class="card-footer mt-4">
<ul class="list-group list-group-flush">
<li
class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 pb-0 text-muted">
Subtotal
<span>$35.00</span>
</li>
<li
class="list-group-item d-flex justify-content-between align-items-center px-0 fw-bold text-uppercase">
Total to pay
<span>$35.00</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-8 mb-4">
<div class="card mb-4">
<div class="card-header py-3">
<h5 class="mb-0 text-font text-uppercase">Delivery address</h5>
</div>
<div class="card-body">
<form>
<div class="row mb-4">
<div class="col">
<div class="form-outline">
<input type="text" id="form6Example1" class="form-control" />
<label class="form-label" for="form6Example1">First name</label>
</div>
</div>
<div class="col">
<div class="form-outline">
<input type="text" id="form6Example2" class="form-control" />
<label class="form-label" for="form6Example2">Last name</label>
</div>
</div>
</div>
<!-- Text input -->
<div class="form-outline mb-4">
<input type="text" id="form6Example3" class="form-control" />
<label class="form-label" for="form6Example3">Company name</label>
</div>
<!-- Text input -->
<div class="form-outline mb-4">
<input type="text" id="form6Example4" class="form-control" />
<label class="form-label" for="form6Example4">Address</label>
</div>
<!-- Email input -->
<div class="form-outline mb-4">
<input type="email" id="form6Example5" class="form-control" />
<label class="form-label" for="form6Example5">Email</label>
</div>
<!-- Number input -->
<div class="form-outline mb-4">
<input type="number" id="form6Example6" class="form-control" />
<label class="form-label" for="form6Example6">Phone</label>
</div>
<!-- Message input -->
<div class="form-outline mb-4">
<textarea class="form-control" id="form6Example7" rows="4"></textarea>
<label class="form-label" for="form6Example7">Additional information</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-2">
<input class="form-check-input me-2" type="checkbox" value="" id="form6Example8"
checked />
<label class="form-check-label" for="form6Example8">
Create an account?
</label>
</div>
</form>
</div>
</div>
<div class="text-center">
<button type="button" class="btn button-order col-md-10">Place order</button>
</div>
</div>
</div>
</section>
<!--Section: Design Block-->
</div>
.text-font{
font-family: futura-pt,Tahoma,Geneva,Verdana,Arial,sans-serif;
font-weight: 700;
letter-spacing: .156rem;
font-size: 1.125rem;
}
.text-price{
padding: 0 .625rem;
font-family: futura-pt,Tahoma,Geneva,Verdana,Arial,sans-serif;
font-style: normal;
font-size: .75rem;
font-weight: 700;
line-height: .813rem;
letter-spacing: 1.6px;
}
.text-descriptions{
font-family: futura-pt,Tahoma,Geneva,Verdana,Arial,sans-serif;
font-style: normal;
font-size: .75rem;
font-weight: 400;
line-height: 1.125rem;
margin: .313rem 0 .938rem;
padding: 0 .625rem;
}
.button-color{
color: #4e4e4e ;
border-color: #4e4e4e ;
}
.button-order{
font-family: futura-pt,Tahoma,Geneva,Verdana,Arial,sans-serif;
font-style: normal;
font-size: .75rem;
font-weight: 700;
background-color: hsl(90, 40%, 50%);
color: white;
}
Address form with image
Lorem ipsum delivery
Everything at your doorstep.
Delivery Info
<div class="container py-5">
<div class="row d-flex justify-content-center align-items-center">
<div class="col">
<div class="card my-4 shadow-3">
<div class="row g-0">
<div class="col-xl-6 d-xl-block bg-image">
<img src="https://mdbootstrap.com/img/Others/extended-example/delivery.webp"
alt="Sample photo" class="img-fluid" />
<div class="mask" style="background-color: rgba(0, 0, 0, 0.6)">
<div class=" justify-content-center align-items-center h-100">
<div class=" text-center" style="margin-top: 220px;">
<i class="fas fa-truck text-white fa-3x"></i>
<p class="text-white title-style">Lorem ipsum delivery</p>
<p class="text-white mb-0"></p>
<figure class="text-center mb-0">
<blockquote class="blockquote text-white">
<p class="pb-3">
<i class="fas fa-quote-left fa-xs text-primary"
style="color: hsl(210, 100%, 50%) ;"></i>
<span class="lead font-italic">Everything at your doorstep.</span>
<i class="fas fa-quote-right fa-xs text-primary"
style="color: hsl(210, 100%, 50%) ;"></i>
</p>
</blockquote>
</figure>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="card-body p-md-5 text-black">
<h3 class="mb-4 text-uppercase">Delivery Info</h3>
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" id="form3Example1m" class="form-control form-control-lg" />
<label class="form-label" for="form3Example1m">First name</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" id="form3Example1n" class="form-control form-control-lg" />
<label class="form-label" for="form3Example1n">Last name</label>
</div>
</div>
</div>
<div class="form-outline mb-4">
<input type="text" id="form3Example8" class="form-control form-control-lg" />
<label class="form-label" for="form3Example8">Address</label>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<select class="select">
<option value="1">State</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
</select>
</div>
<div class="col-md-6 mb-4">
<select class="select">
<option value="1">City</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
</select>
</div>
</div>
<div class="form-outline mb-4">
<input type="text" id="form3Example3" class="form-control form-control-lg" />
<label class="form-label" for="form3Example3">Zip</label>
</div>
<div class="form-outline mb-4">
<input type="text" id="form3Example2" class="form-control form-control-lg" />
<label class="form-label" for="form3Example2">Email</label>
</div>
<div class="d-flex justify-content-end pt-3">
<button type="button" class="btn btn-success btn-lg ms-2"
style="background-color:hsl(210, 100%, 50%) ">Place order</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.title-style{
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: 700;
font-size: 20px;
color: hsl(52, 0%, 98%);
}
.title-quote{
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: 400;
color: hsl(52, 0%, 98%);
}
If you want to learn more about using forms, check out Forms documentation.