<!-- Wizard -->
<div class="wizard">
<!-- Wizard Steps -->
<div class="wizard-steps d-flex flex-wrap flex-sm-nowrap justify-content-between">
<a class="wizard-step" href="#"><i class="fe-icon-check-circle text-success"></i>1. Personal Details</a>
<div class="wizard-step active">2. Billing Address</div>
<a class="wizard-step" href="#">3. Contact Details</a>
<a class="wizard-step" href="#">4. Payment Method</a>
</div>
<!-- Wizard Body -->
<div class="wizard-body">
<h3 class="h5 pb-2">Billing Address</h3>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="text-muted" for="wizard-fn">First Name</label>
<input class="form-control" type="text" id="wizard-fn">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="text-muted" for="wizard-ln">Last Name</label>
<input class="form-control" type="text" id="wizard-ln">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="text-muted" for="wizard-email">E-mail Address</label>
<input class="form-control" type="email" id="wizard-email">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="text-muted" for="wizard-phone">Phone Number</label>
<input class="form-control" type="text" id="wizard-phone">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="text-muted" for="wizard-company">Company</label>
<input class="form-control" type="text" id="wizard-company">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="text-muted" for="wizard-country">Country</label>
<select class="form-control" id="wizard-country">
<option>Choose country</option>
<option>Australia</option>
<option>Canada</option>
<option>France</option>
<option>Germany</option>
<option>Switzerland</option>
<option>USA</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="text-muted" for="wizard-city">Country</label>
<select class="form-control" id="wizard-city">
<option>Choose city</option>
<option>Amsterdam</option>
<option>Berlin</option>
<option>Geneve</option>
<option>New York</option>
<option>Paris</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="text-muted" for="wizard-zip">ZIP Code</label>
<input class="form-control" type="text" id="wizard-zip">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="text-muted" for="wizard-address-1">Address 1</label>
<input class="form-control" type="text" id="wizard-address-1">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="text-muted" for="wizard-address-2">Address 2</label>
<input class="form-control" type="text" id="wizard-address-2">
</div>
</div>
</div>
</div>
<!-- Wizard Footer -->
<div class="wizard-footer d-flex justify-content-between">
<a class="btn btn-secondary my-2" href="#">
<i class="fe-icon-arrow-left"></i>
<span class="d-none d-sm-inline-block">Back</span>
</a>
<a class="btn btn-primary my-2" href="#">
<span class="d-none d-sm-inline-block">Continue</span>
<i class="fe-icon-arrow-right"></i>
</a>
</div>
</div>
//- Wizard
.wizard
//- Wizard Steps
.wizard-steps.d-flex.flex-wrap.flex-sm-nowrap.justify-content-between
a(href="#").wizard-step
i.fe-icon-check-circle.text-success
| 1. Personal Details
.wizard-step.active 2. Billing Address
a(href="#").wizard-step 3. Contact Details
a(href="#").wizard-step 4. Payment Method
//- Wizard Body
.wizard-body
h3.h5.pb-2 Billing Address
.row
.col-sm-6
.form-group
label(for="wizard-fn").text-muted First Name
input(type="text")#wizard-fn.form-control
.col-sm-6
.form-group
label(for="wizard-ln").text-muted Last Name
input(type="text")#wizard-ln.form-control
.row
.col-sm-6
.form-group
label(for="wizard-email").text-muted E-mail Address
input(type="email")#wizard-email.form-control
.col-sm-6
.form-group
label(for="wizard-phone").text-muted Phone Number
input(type="text")#wizard-phone.form-control
.row
.col-sm-6
.form-group
label(for="wizard-company").text-muted Company
input(type="text")#wizard-company.form-control
.col-sm-6
.form-group
label(for="wizard-country").text-muted Country
select#wizard-country.form-control
option Choose country
option Australia
option Canada
option France
option Germany
option Switzerland
option USA
.row
.col-sm-6
.form-group
label(for="wizard-city").text-muted Country
select#wizard-city.form-control
option Choose city
option Amsterdam
option Berlin
option Geneve
option New York
option Paris
.col-sm-6
.form-group
label(for="wizard-zip").text-muted ZIP Code
input(type="text")#wizard-zip.form-control
.row
.col-sm-6
.form-group
label(for="wizard-address-1").text-muted Address 1
input(type="text")#wizard-address-1.form-control
.col-sm-6
.form-group
label(for="wizard-address-2").text-muted Address 2
input(type="text")#wizard-address-2.form-control
//- Wizard Footer
.wizard-footer.d-flex.justify-content-between
a(href="#").btn.btn-secondary.my-2
i.fe-icon-arrow-left
span.d-none.d-sm-inline-block Back
a(href="#").btn.btn-primary.my-2
span.d-none.d-sm-inline-block Continue
i.fe-icon-arrow-right
