<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="jquery.steps.min.js"></script> <form action="#" class="vertical-tab-steps wizard-circle"> <h6>Step 1</h6> <fieldset> <div class="form-group"> <label for="fullName">Full Name :</label> <input type="text" class="form-control" id="fullName" > </div> </fieldset> <h6>Step 2</h6> <fieldset> <div class="form-group"> <label for="emailAddress">Email Address :</label> <input type="email" class="form-control" id="emailAddress" > </div> </fieldset> <h6>Step 3</h6> <fieldset> <div class="form-group"> <label for="eventName">Event Name :</label> <input type="text" class="form-control" id="eventName" > </div> </fieldset> <h6>Step 4</h6> <fieldset> <div class="form-group"> <label for="meetingName">Name of Meeting :</label> <input type="text" class="form-control" id="meetingName" > </div> </fieldset> </form>

$(".vertical-tab-steps").steps({ headerTag: "h6", bodyTag: "fieldset", transitionEffect: "fade", stepsOrientation: "vertical", titleTemplate: '#index# #title#', labels: { finish: 'Submit' }, onFinished: function (event, currentIndex) { alert("Form submitted."); } });