Posted by admin at January 14, 2020
Bootstrap provides three types of form layouts:
Standard rules for all three form layouts:
<div class="form-group">
(needed for optimum spacing).form-control
to all textual <input>
, <textarea>
, and <select>
elements<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>
Comments