Bootstrap Billing form

Posted by admin at January 14, 2020

Bootstrap provides three types of form layouts:

• Vertical form (this is default)
• Horizontal form
• Inline form

Standard rules for all three form layouts:

• Wrap labels and form controls in <div class="form-group"> (needed for optimum spacing)
• Add class .form-control to all textual <input>, <textarea>, and <select> elements

Code

<div class="container">
      <h2 class="text-center m-4">Billing and Payment Details</h2>
      <form action="#">
        <div class="form-group">
          <label for="name">Full Name</label>
          <input
            type="text"
            class="form-control"
            id="name"
            placeholder="Enter full name"
          />
        </div>
        <div class="form-group">
          <label for="address">Address</label>
          <input
            type="text"
            class="form-control"
            id="address"
            placeholder="Enter the Billing address"
          />
        </div>
        <div class="row">
          <div class="col-sm-12 col-md-4">
            <div class="form-group">
              <label for="country">Country</label>
              <select class="form-control" id="country">
                <option>Choose</option>
                <option>India</option>
                <option>Pakistan</option>
                <option>America</option>
                <option>Iraq</option>
              </select>
            </div>
          </div>
          <div class="col-sm-12 col-md-4">
            <div class="form-group">
              <label for="state">State</label>
              <select class="form-control" id="state">
                <option>Choose</option>
                <option>Uttar Pradesh</option>
                <option>Bihar</option>
                <option>Delhi</option>
                <option>Maharastra</option>
              </select>
            </div>
          </div>
          <div class="col-sm-12 col-md-4">
            <div class="form-group">
              <label for="pin">State</label>
              <input
                type="text"
                class="form-control"
                id="pin"
                placeholder="Enter pin"
              />
            </div>
          </div>
        </div>
        <div class="custom-control custom-checkbox">
          <input
            type="checkbox"
            class="custom-control-input"
            id="customCheck1"
          />
          <label class="custom-control-label" for="customCheck1"
            >Shopping address is same as Billing address</label
          >
        </div>
        <div class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" id="chb1" />
          <label class="custom-control-label" for="chb1"
            >Save this information for future</label
          >
        </div>
        <hr />
        <h2>Payment</h2>
        <div class="custom-control custom-radio">
          <input
            type="radio"
            id="customRadio1"
            name="customRadio"
            class="custom-control-input"
          />
          <label class="custom-control-label" for="customRadio1"
            >Credit Card</label
          >
        </div>
        <div class="custom-control custom-radio">
          <input
            type="radio"
            id="customRadio2"
            name="customRadio"
            class="custom-control-input"
          />
          <label class="custom-control-label" for="customRadio2"
            >Debit Card</label
          >
        </div>
        <div class="row">
          <div class="col-sm-6">
            <div class="form-group">
              <label for="cname">Name on Card</label>
              <input
                type="text"
                class="form-control"
                id="cname"
                placeholder="Enter the Billing address"
              />
            </div>
          </div>
          <div class="col-sm-6">
            <div class="form-group">
              <label for="cnum">Card Number</label>
              <input
                type="text"
                class="form-control"
                id="cnum"
                placeholder="Enter the Billing address"
              />
            </div>
          </div>
          <div class="col-sm-6">
            <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="cx">Card Expiration</label>
                  <input
                    type="text"
                    class="form-control"
                    id="cx"
                    placeholder="Enter the Billing address"
                  />
                </div>
              </div>
               <div class="col-sm-6">
                <div class="form-group">
                  <label for="cvv">CVV</label>
                  <input
                    type="text"
                    class="form-control"
                    id="cvv"
                    placeholder="Enter the Billing address"
                  />
                </div>
              </div>
              
            </div>
          </div>
        </div>
        <div class="col-12">
            <button class="btn btn-primary w-100">Submit Details</button>
        </div>
      </form>
    </div>

---