Twitter Bootstrap Wizard
This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure. It allows us to create a wizard functionality using buttons to go through the different wizard steps, and using events enables us to hook into each step individually.
The Final Twitter Bootstrap Wizard DocumentationExample
Set .pager element to a unique id and assign it to data-controller attribute in .theme-wizard element to detect current wizard and its corresponding pagination. To add error modal notification, assign your modal id to data-error-modal attribute.
<div class="row justify-content-center no-gutters">
<div class="col-lg-9 col-xxl-6 px-4 pb-3">
<div class="card border shadow-none theme-wizard shadow-0" data-wizard data-controller="#wizard-controller" data-error-modal="#error-modal">
<div class="card-header">
<ul class="nav justify-content-between nav-wizard">
<li class="nav-item"><a class="nav-link active font-weight-semi-bold" href="#bootstrap-wizard-tab1" data-toggle="tab"><span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fas fa-lock"></span></span></span><span class="d-none d-md-block mt-1 fs--1">Account</span></a></li>
<li class="nav-item"><a class="nav-link font-weight-semi-bold" href="#bootstrap-wizard-tab2" data-toggle="tab"><span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fas fa-user"></span></span></span><span class="d-none d-md-block mt-1 fs--1">Personal</span></a></li>
<li class="nav-item"><a class="nav-link font-weight-semi-bold" href="#bootstrap-wizard-tab3" data-toggle="tab"><span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fas fa-dollar-sign"></span></span></span><span class="d-none d-md-block mt-1 fs--1">Billing</span></a></li>
<li class="nav-item"><a class="nav-link font-weight-semi-bold" href="#bootstrap-wizard-tab4" data-toggle="tab"><span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fas fa-thumbs-up"></span></span></span><span class="d-none d-md-block mt-1 fs--1">Done</span></a></li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active px-sm-3 px-md-5" id="bootstrap-wizard-tab1">
<form class="form-validation" data-options='{"rules":{"confirmPassword":{"equalTo":"#wizard-password"}},"messages":{"confirmPassword":{"equalTo":"Passwords didn't match"},"terms":{"required":"You must accept terms and privacy policy"}}}'>
<div class="form-group">
<label for="wizard-name">Name</label>
<input class="form-control" type="text" name="name" placeholder="John Smith" id="wizard-name" />
</div>
<div class="form-group">
<label for="wizard-email">Email*</label>
<input class="form-control" type="email" name="email" placeholder="Email address" required="required" id="wizard-email" />
</div>
<div class="form-row">
<div class="col-6">
<div class="form-gorup">
<label for="wizard-password">Password*</label>
<input class="form-control" type="password" name="password" placeholder="Password" required="required" id="wizard-password" />
</div>
</div>
<div class="col-6">
<div class="form-group">
<label for="wizard-confirm-password">Confirm Password*</label>
<input class="form-control" type="password" name="confirmPassword" placeholder="Confirm Password" id="wizard-confirm-password" />
</div>
</div>
</div>
<div class="custom-control custom-checkbox">
<input class="custom-control-input" id="wizard-checkbox" type="checkbox" name="terms" required="required" checked="checked" />
<label class="custom-control-label" for="wizard-checkbox">I accept the <a href="#!">terms </a>and <a href="#!">privacy policy</a></label>
</div>
</form>
</div>
<div class="tab-pane px-sm-3 px-md-5" id="bootstrap-wizard-tab2">
<form class="form-validation">
<div class="form-group">
<div class="row" data-dropzone="data-dropzone" data-options='{"maxFiles":1,"data":[{"name":"avatar.png","size":"54kb","url":"../assets/img/team"}]}'>
<div class="fallback">
<input type="file" name="file" />
</div>
<div class="col-md-auto">
<div class="dz-preview dz-preview-single">
<div class="dz-preview-cover d-flex align-items-center justify-content-center mb-3 mb-md-0">
<div class="avatar avatar-4xl"><img class="rounded-circle" src="..." alt="..." data-dz-thumbnail="data-dz-thumbnail" /></div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress=""></span></div>
</div>
</div>
</div>
<div class="col-md">
<div class="dz-message dropzone-area px-2 py-3" data-dz-message="data-dz-message">
<div class="text-center"><img class="mr-2" src="../assets/img/icons/cloud-upload.svg" width="25" alt="" />Upload your profile picture
<p class="mb-0 fs--1 text-400">Upload a 300x300 jpg image with <br />a maximum size of 400KB</p>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="gender">Gender</label>
<select class="form-control custom-select" id="gender" name="gender">
<option value="">Select your gender ...</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</div>
<div class="form-group">
<label for="wizard-phone">Phone</label>
<input class="form-control" type="text" name="phone" placeholder="Phone" id="wizard-phone" />
</div>
<div class="form-group">
<label for="wizard-datepicker">Date of Birth</label>
<input class="form-control datetimepicker" id="wizard-datepicker" type="text" placeholder="d/m/y" data-options='{"dateFormat":"d/m/Y"}' />
</div>
<div class="form-group">
<label for="wizard-address">Address</label>
<textarea class="form-control" rows="4" id="wizard-address"></textarea>
</div>
</form>
</div>
<div class="tab-pane px-sm-3 px-md-5" id="bootstrap-wizard-tab3">
<form class="form-validation">
<div class="form-row">
<div class="col">
<div class="form-group">
<label for="card-number">Card Number</label>
<input class="form-control" id="card-number" placeholder="XXXX XXXX XXXX XXXX" type="text" />
</div>
</div>
<div class="col">
<div class="form-group">
<label for="card-name">Name on Card</label>
<input class="form-control" id="card-name" placeholder="John Doe" name="cardName" type="text" />
</div>
</div>
</div>
<div class="form-row">
<div class="col-6">
<div class="form-group">
<label for="card-holder-country">Country</label>
<select class="custom-select" id="card-holder-country" name="customSelectCountry">
<option value="">Select your country ...</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia and Herzegowina">Bosnia and Herzegowina</option>
<option value="Botswana">Botswana</option>
<option value="Bouvet Island">Bouvet Island</option>
<option value="Brazil">Brazil</option>
<option value="British Indian Ocean Te