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

    (including VAT)

    $53.98

        <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 8

Qty: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.jpg"
                          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.jpg"
                          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

Sample photo

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.jpg"
                      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.