content logo

Bootstrap Forms:

Collapsible Forms with Gradient Background using Bootstrap

Whenever you need to get a lot of information from the user in several stages on your website, and because the size of the forms was increasing, you were looking for a solution, you can use this code. There are several collapses in this code, and by clicking on each one, a form is displayed. The content of each of these collapses is different, but their use makes the forms much more orderly.

#HTML Forms Code #Bootstrap Forms with Gradient #Collapse Form Codes #Free CSS Form

<!-- This script got from www.frontendfreecode.com -->
<div class="container imi-joingform">
    <!-- Start Header -->
    <div class="imc-jfheader">
        <div class="row">
            <div class="col-lg-6">
                <div class="imc-logo">
                    <h3>Collapse Steps Form</h3>
                </div>
            </div>
            <div class="col-lg-6 text-right">
                <div class="imc-text">
                    <h2>
                        Last Visited on <span id="dateandtime"> 08-May-2021 12:01 PM </span> | My Profile | <span id="logstatus"> <a href="#">Logout </a> </span>
                    </h2>
                </div>
            </div>
        </div>
    </div>
    <!-- End Header -->
    <!-- Start Joining Form -->
    <!-- Start row -->
    <div class="row">
        <div class="col-md-12">
            <!-- Start accordion -->
            <div id="accordion" class="">
                <!-- Start First collapse -->
                <div class="panel checkout-step">
                    <div role="tab" id="headingOne" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                        <div class="row">
                            <div class="col-10 col-lg-10">
                                <span class="checkout-step-number">1</span>
                                <h4 class="checkout-step-title"><a role="button"> Personal Details</a></h4>
                            </div>
                            <div class="col-2 col-lg-2 text-right d-none d-sm-block d-md-block d-lg-block d-xl-block">
                                <button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn">Edit <i class="fa fa-edit"></i></button>
                            </div>
                            <div class="col-2 col-lg-2 text-right d-md-none d-lg-none">
                                <button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn"><i class="fa fa-edit"></i></button>
                            </div>
                        </div>
                    </div>
                    <div id="collapseOne" class="collapse in">
                        <!-- Start collapse body -->
                        <div class="checkout-step-body">
                            <!-- Start row -->
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">First Name</label>
                                                <input id="name" name="name" type="text" placeholder="First Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Middle Name</label>
                                                <input id="name" name="name" type="text" placeholder="Middle Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Last Name</label>
                                                <input id="name" name="name" type="text" placeholder="Last Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End row -->
                            <!-- Start row -->
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Mobile No</label>
                                                <input id="name" name="name" type="text" placeholder="+91" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Email Id</label>
                                                <input id="name" name="name" type="text" placeholder="Email Id" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Address</label>
                                                <input id="name" name="name" type="text" placeholder="Address" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End row -->
                            <!-- Start button row -->
                            <div class="row">
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4 text-right">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <button id="nextBtn" name="nextBtn" class="btn btn-primary">Next</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End button row -->
                        </div>
                        <!-- End collapse body -->
                    </div>
                </div>
                <!-- End First collapse -->
                <!-- Start Second collapse -->
                <div class="panel checkout-step">
                    <div role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                        <div class="row">
                            <div class="col-10 col-lg-10">
                                <span class="checkout-step-number">2</span>
                                <h4 class="checkout-step-title"><a role="button"> Professional Details</a></h4>
                            </div>
                            <div class="col-2 col-lg-2 text-right d-none d-sm-block d-md-block d-lg-block d-xl-block">
                                <button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn">Edit <i class="fa fa-edit"></i></button>
                            </div>
                            <div class="col-2 col-lg-2 text-right d-md-none d-lg-none">
                                <button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn"><i class="fa fa-edit"></i></button>
                            </div>
                        </div>
                    </div>
                    <div id="collapseTwo" class="collapse">
                        <!-- Start collapse body -->
                        <div class="checkout-step-body">
                            <!-- Start row -->
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">First Name</label>
                                                <input id="name" name="name" type="text" placeholder="First Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Middle Name</label>
                                                <input id="name" name="name" type="text" placeholder="Middle Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Last Name</label>
                                                <input id="name" name="name" type="text" placeholder="Last Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End row -->
                            <!-- Start row -->
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Mobile No</label>
                                                <input id="name" name="name" type="text" placeholder="+91" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Email Id</label>
                                                <input id="name" name="name" type="text" placeholder="Email Id" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Address</label>
                                                <input id="name" name="name" type="text" placeholder="Address" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End row -->
                            <!-- Start button row -->
                            <div class="row">
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4 text-right">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <button id="nextBtn" name="nextBtn" class="btn btn-primary">Next</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End button row -->
                        </div>
                        <!-- End collapse body -->
                    </div>
                </div>
                <!-- End Second collapse -->
                <!-- Start Third collapse -->
                <div class="panel checkout-step">
                    <div role="tab" id="headingThree" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                        <div class="row">
                            <div class="col-10 col-lg-10">
                                <span class="checkout-step-number">3</span>
                                <h4 class="checkout-step-title"><a role="button"> Educational Details</a></h4>
                            </div>
                            <div class="col-2 col-lg-2 text-right d-none d-sm-block d-md-block d-lg-block d-xl-block">
                                <button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn">Edit <i class="fa fa-edit"></i></button>
                            </div>
                            <div class="col-2 col-lg-2 text-right d-md-none d-lg-none">
                                <button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn"><i class="fa fa-edit"></i></button>
                            </div>
                        </div>
                    </div>
                    <div id="collapseThree" class="collapse">
                        <!-- Start collapse body -->
                        <div class="checkout-step-body">
                            <!-- Start row -->
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">First Name</label>
                                                <input id="name" name="name" type="text" placeholder="First Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Middle Name</label>
                                                <input id="name" name="name" type="text" placeholder="Middle Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Last Name</label>
                                                <input id="name" name="name" type="text" placeholder="Last Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End row -->
                            <!-- Start row -->
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Mobile No</label>
                                                <input id="name" name="name" type="text" placeholder="+91" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Email Id</label>
                                                <input id="name" name="name" type="text" placeholder="Email Id" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Address</label>
                                                <input id="name" name="name" type="text" placeholder="Address" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End row -->
                            <!-- Start button row -->
                            <div class="row">
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4 text-right">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <button id="nextBtn" name="nextBtn" class="btn btn-primary">Next</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End button row -->
                        </div>
                        <!-- End collapse body -->
                    </div>
                </div>
                <!-- End Third collapse -->
                <!-- Start Fourth collapse -->
                <div class="panel checkout-step">
                    <div role="tab" id="headingFour" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
                        <div class="row">
                            <div class="col-10 col-lg-10">
                                <span class="checkout-step-number">4</span>
                                <h4 class="checkout-step-title"><a role="button"> Nominee Details</a></h4>
                            </div>
                            <div class="col-2 col-lg-2 text-right d-none d-sm-block d-md-block d-lg-block d-xl-block">
                                <button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn">Edit <i class="fa fa-edit"></i></button>
                            </div>
                            <div class="col-2 col-lg-2 text-right d-md-none d-lg-none">
                                <button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn"><i class="fa fa-edit"></i></button>
                            </div>
                        </div>
                    </div>
                    <div id="collapseFour" class="collapse">
                        <!-- Start collapse body -->
                        <div class="checkout-step-body">
                            <!-- Start row -->
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">First Name</label>
                                                <input id="name" name="name" type="text" placeholder="First Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Middle Name</label>
                                                <input id="name" name="name" type="text" placeholder="Middle Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Last Name</label>
                                                <input id="name" name="name" type="text" placeholder="Last Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End row -->
                            <!-- Start row -->
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Mobile No</label>
                                                <input id="name" name="name" type="text" placeholder="+91" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Email Id</label>
                                                <input id="name" name="name" type="text" placeholder="Email Id" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Address</label>
                                                <input id="name" name="name" type="text" placeholder="Address" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End row -->
                            <!-- Start button row -->
                            <div class="row">
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4 text-right">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <button id="nextBtn" name="nextBtn" class="btn btn-primary">Next</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End button row -->
                        </div>
                        <!-- End collapse body -->
                    </div>
                </div>
                <!-- End Fourth collapse -->
                <!-- Start Five collapse -->
                <div class="panel checkout-step">
                    <div role="tab" id="headingFive" data-toggle="collapse" data-parent="#accordion" href="#collapseFive">
                        <div class="row">
                            <div class="col-10 col-lg-10">
                                <span class="checkout-step-number">5</span>
                                <h4 class="checkout-step-title"><a role="button"> Documents Details</a></h4>
                            </div>
                            <div class="col-2 col-lg-2 text-right d-none d-sm-block d-md-block d-lg-block d-xl-block">
                                <button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn">Edit <i class="fa fa-edit"></i></button>
                            </div>
                            <div class="col-2 col-lg-2 text-right d-md-none d-lg-none">
                                <button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn"><i class="fa fa-edit"></i></button>
                            </div>
                        </div>
                    </div>
                    <div id="collapseFive" class="collapse">
                        <!-- Start collapse body -->
                        <div class="checkout-step-body">
                            <!-- Start row -->
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">First Name</label>
                                                <input id="name" name="name" type="text" placeholder="First Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Middle Name</label>
                                                <input id="name" name="name" type="text" placeholder="Middle Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Last Name</label>
                                                <input id="name" name="name" type="text" placeholder="Last Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End row -->
                            <!-- Start row -->
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Mobile No</label>
                                                <input id="name" name="name" type="text" placeholder="+91" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Email Id</label>
                                                <input id="name" name="name" type="text" placeholder="Email Id" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Address</label>
                                                <input id="name" name="name" type="text" placeholder="Address" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End row -->
                            <!-- Start button row -->
                            <div class="row">
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4 text-right">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <button id="nextBtn" name="nextBtn" class="btn btn-primary">Next</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End button row -->
                        </div>
                        <!-- End collapse body -->
                    </div>
                </div>
                <!-- End Five collapse -->
                <!-- Start Six collapse -->
                <div class="panel checkout-step">
                    <div role="tab" id="headingSix" data-toggle="collapse" data-parent="#accordion" href="#collapseSix">
                        <div class="row">
                            <div class="col-10 col-lg-10">
                                <span class="checkout-step-number">6</span>
                                <h4 class="checkout-step-title"><a role="button"> Reviews </a></h4>
                            </div>
                        </div>
                    </div>
                    <div id="collapseSix" class="collapse">
                        <!-- Start collapse body -->
                        <div class="checkout-step-body">
                            <!-- Start row -->
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name"><strong>Name : </strong></label>
                                                <label class="control-label" for="name">test</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name"><strong>Gender : </strong></label>
                                                <label class="control-label" for="name">Male</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name"><strong>Mobile : </strong></label>
                                                <label class="control-label" for="name">111111111</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End row -->
                            <!-- Start row -->
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name"><strong>Email : </strong></label>
                                                <label class="control-label" for="name">info@example.com</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name"><strong>Address : </strong></label>
                                                <label class="control-label" for="name">test </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class=""></div>
                                </div>
                            </div>
                            <!-- End row -->
                            <!-- Start button row -->
                            <div class="row">
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4 text-right">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <button id="nextBtn" name="nextBtn" class="btn btn-primary">Print</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End button row -->
                        </div>
                        <!-- End collapse body -->
                    </div>
                </div>
                <!-- End Six collapse -->
            </div>
            <!-- End accordion -->
        </div>
    </div>
    <!-- End row -->
    <!-- End Joining Form -->
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Free Code</a>
                                                                            
body {
    background: #7f7fd5; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #91eae4, #86a8e7, #7f7fd5); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #91eae4, #86a8e7, #7f7fd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.panel {
    margin-bottom: 0px;
}
.checkout-step {
    /*background: #e8eef1;*/
    background: #83a4d4; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #b6fbff, #83a4d4); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #b6fbff, #83a4d4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-top: 1px solid #607d8b21;
    color: #666;
    font-size: 14px;
    padding: 15px 10px;
    position: relative;
}
.checkout-step-number {
    border-radius: 50%;
    /* border: 1px solid #ced0d2; */
    display: inline-block;
    background: #065c9f;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
    height: 32px;
    margin-right: 15px;
    padding: 6px;
    text-align: center;
    width: 32px;
}
.checkout-step-title {
    font-size: 16px;
    font-weight: 500;
    vertical-align: middle;
    display: inline-block;
    margin: 0px;
    color: #3d4884;
}
.checkout-step-body {
    background: #fbfbfb;
    padding: 15px 0px;
    margin: 20px 0px 0px;
}
.imi-joingform {
    margin-top: 50px;
}
.imc-jfheader {
    background: #fff;
    padding: 15px;
}
.imc-text h1 {
    font-size: 20px;
    color: #00bcd4;
}
.imc-text h2 {
    font-size: 12px;
}
.imc-jfeditbtn {
    padding: 5px;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
    background: #29506f;
}
#collapseOne, #collapseTwo, #collapseThree, #collapseFour, #collapseFive, #collapseSix{
    transition: all .3s;
}
#headingOne, #headingTwo, #headingThree, #headingFour, #headingFive, #headingSix{
    cursor: pointer;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.frontendfreecode.com -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<style>
body {
    background: #7f7fd5; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #91eae4, #86a8e7, #7f7fd5); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #91eae4, #86a8e7, #7f7fd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.panel {
    margin-bottom: 0px;
}
.checkout-step {
    /*background: #e8eef1;*/
    background: #83a4d4; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #b6fbff, #83a4d4); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #b6fbff, #83a4d4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-top: 1px solid #607d8b21;
    color: #666;
    font-size: 14px;
    padding: 15px 10px;
    position: relative;
}
.checkout-step-number {
    border-radius: 50%;
    /* border: 1px solid #ced0d2; */
    display: inline-block;
    background: #065c9f;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
    height: 32px;
    margin-right: 15px;
    padding: 6px;
    text-align: center;
    width: 32px;
}
.checkout-step-title {
    font-size: 16px;
    font-weight: 500;
    vertical-align: middle;
    display: inline-block;
    margin: 0px;
    color: #3d4884;
}
.checkout-step-body {
    background: #fbfbfb;
    padding: 15px 0px;
    margin: 20px 0px 0px;
}
.imi-joingform {
    margin-top: 50px;
}
.imc-jfheader {
    background: #fff;
    padding: 15px;
}
.imc-text h1 {
    font-size: 20px;
    color: #00bcd4;
}
.imc-text h2 {
    font-size: 12px;
}
.imc-jfeditbtn {
    padding: 5px;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
    background: #29506f;
}
#collapseOne, #collapseTwo, #collapseThree, #collapseFour, #collapseFive, #collapseSix{
    transition: all .3s;
}
#headingOne, #headingTwo, #headingThree, #headingFour, #headingFive, #headingSix{
    cursor: pointer;
}
</style>

</head>
<body>
<div class="container imi-joingform">
    <!-- Start Header -->
    <div class="imc-jfheader">
        <div class="row">
            <div class="col-lg-6">
                <div class="imc-logo">
                    <h3>Collapse Steps Form</h3>
                </div>
            </div>
            <div class="col-lg-6 text-right">
                <div class="imc-text">
                    <h2>
                        Last Visited on <span id="dateandtime"> 08-May-2021 12:01 PM </span> | My Profile | <span id="logstatus"> <a href="#">Logout </a> </span>
                    </h2>
                </div>
            </div>
        </div>
    </div>
    <!-- End Header -->
    <!-- Start Joining Form -->
    <!-- Start row -->
    <div class="row">
        <div class="col-md-12">
            <!-- Start accordion -->
            <div id="accordion" class="">
                <!-- Start First collapse -->
                <div class="panel checkout-step">
                    <div role="tab" id="headingOne" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                        <div class="row">
                            <div class="col-10 col-lg-10">
                                <span class="checkout-step-number">1</span>
                                <h4 class="checkout-step-title"><a role="button"> Personal Details</a></h4>
                            </div>
                            <div class="col-2 col-lg-2 text-right d-none d-sm-block d-md-block d-lg-block d-xl-block">
                                <button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn">Edit <i class="fa fa-edit"></i></button>
                            </div>
                            <div class="col-2 col-lg-2 text-right d-md-none d-lg-none">
                                <button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn"><i class="fa fa-edit"></i></button>
                            </div>
                        </div>
                    </div>
                    <div id="collapseOne" class="collapse in">
                        <!-- Start collapse body -->
                        <div class="checkout-step-body">
                            <!-- Start row -->
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">First Name</label>
                                                <input id="name" name="name" type="text" placeholder="First Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Middle Name</label>
                                                <input id="name" name="name" type="text" placeholder="Middle Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Last Name</label>
                                                <input id="name" name="name" type="text" placeholder="Last Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End row -->
                            <!-- Start row -->
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Mobile No</label>
                                                <input id="name" name="name" type="text" placeholder="+91" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Email Id</label>
                                                <input id="name" name="name" type="text" placeholder="Email Id" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Address</label>
                                                <input id="name" name="name" type="text" placeholder="Address" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End row -->
                            <!-- Start button row -->
                            <div class="row">
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4 text-right">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <button id="nextBtn" name="nextBtn" class="btn btn-primary">Next</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End button row -->
                        </div>
                        <!-- End collapse body -->
                    </div>
                </div>
                <!-- End First collapse -->
                <!-- Start Second collapse -->
                <div class="panel checkout-step">
                    <div role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                        <div class="row">
                            <div class="col-10 col-lg-10">
                                <span class="checkout-step-number">2</span>
                                <h4 class="checkout-step-title"><a role="button"> Professional Details</a></h4>
                            </div>
                            <div class="col-2 col-lg-2 text-right d-none d-sm-block d-md-block d-lg-block d-xl-block">
                                <button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn">Edit <i class="fa fa-edit"></i></button>
                            </div>
                            <div class="col-2 col-lg-2 text-right d-md-none d-lg-none">
                                <button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn"><i class="fa fa-edit"></i></button>
                            </div>
                        </div>
                    </div>
                    <div id="collapseTwo" class="collapse">
                        <!-- Start collapse body -->
                        <div class="checkout-step-body">
                            <!-- Start row -->
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">First Name</label>
                                                <input id="name" name="name" type="text" placeholder="First Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Middle Name</label>
                                                <input id="name" name="name" type="text" placeholder="Middle Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Last Name</label>
                                                <input id="name" name="name" type="text" placeholder="Last Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End row -->
                            <!-- Start row -->
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Mobile No</label>
                                                <input id="name" name="name" type="text" placeholder="+91" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Email Id</label>
                                                <input id="name" name="name" type="text" placeholder="Email Id" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Address</label>
                                                <input id="name" name="name" type="text" placeholder="Address" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End row -->
                            <!-- Start button row -->
                            <div class="row">
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4 text-right">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <button id="nextBtn" name="nextBtn" class="btn btn-primary">Next</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End button row -->
                        </div>
                        <!-- End collapse body -->
                    </div>
                </div>
                <!-- End Second collapse -->
                <!-- Start Third collapse -->
                <div class="panel checkout-step">
                    <div role="tab" id="headingThree" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                        <div class="row">
                            <div class="col-10 col-lg-10">
                                <span class="checkout-step-number">3</span>
                                <h4 class="checkout-step-title"><a role="button"> Educational Details</a></h4>
                            </div>
                            <div class="col-2 col-lg-2 text-right d-none d-sm-block d-md-block d-lg-block d-xl-block">
                                <button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn">Edit <i class="fa fa-edit"></i></button>
                            </div>
                            <div class="col-2 col-lg-2 text-right d-md-none d-lg-none">
                                <button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn"><i class="fa fa-edit"></i></button>
                            </div>
                        </div>
                    </div>
                    <div id="collapseThree" class="collapse">
                        <!-- Start collapse body -->
                        <div class="checkout-step-body">
                            <!-- Start row -->
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">First Name</label>
                                                <input id="name" name="name" type="text" placeholder="First Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Middle Name</label>
                                                <input id="name" name="name" type="text" placeholder="Middle Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Last Name</label>
                                                <input id="name" name="name" type="text" placeholder="Last Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End row -->
                            <!-- Start row -->
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Mobile No</label>
                                                <input id="name" name="name" type="text" placeholder="+91" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Email Id</label>
                                                <input id="name" name="name" type="text" placeholder="Email Id" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Address</label>
                                                <input id="name" name="name" type="text" placeholder="Address" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End row -->
                            <!-- Start button row -->
                            <div class="row">
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4 text-right">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <button id="nextBtn" name="nextBtn" class="btn btn-primary">Next</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End button row -->
                        </div>
                        <!-- End collapse body -->
                    </div>
                </div>
                <!-- End Third collapse -->
                <!-- Start Fourth collapse -->
                <div class="panel checkout-step">
                    <div role="tab" id="headingFour" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
                        <div class="row">
                            <div class="col-10 col-lg-10">
                                <span class="checkout-step-number">4</span>
                                <h4 class="checkout-step-title"><a role="button"> Nominee Details</a></h4>
                            </div>
                            <div class="col-2 col-lg-2 text-right d-none d-sm-block d-md-block d-lg-block d-xl-block">
                                <button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn">Edit <i class="fa fa-edit"></i></button>
                            </div>
                            <div class="col-2 col-lg-2 text-right d-md-none d-lg-none">
                                <button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn"><i class="fa fa-edit"></i></button>
                            </div>
                        </div>
                    </div>
                    <div id="collapseFour" class="collapse">
                        <!-- Start collapse body -->
                        <div class="checkout-step-body">
                            <!-- Start row -->
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">First Name</label>
                                                <input id="name" name="name" type="text" placeholder="First Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Middle Name</label>
                                                <input id="name" name="name" type="text" placeholder="Middle Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Last Name</label>
                                                <input id="name" name="name" type="text" placeholder="Last Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End row -->
                            <!-- Start row -->
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Mobile No</label>
                                                <input id="name" name="name" type="text" placeholder="+91" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Email Id</label>
                                                <input id="name" name="name" type="text" placeholder="Email Id" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Address</label>
                                                <input id="name" name="name" type="text" placeholder="Address" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End row -->
                            <!-- Start button row -->
                            <div class="row">
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4 text-right">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <button id="nextBtn" name="nextBtn" class="btn btn-primary">Next</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End button row -->
                        </div>
                        <!-- End collapse body -->
                    </div>
                </div>
                <!-- End Fourth collapse -->
                <!-- Start Five collapse -->
                <div class="panel checkout-step">
                    <div role="tab" id="headingFive" data-toggle="collapse" data-parent="#accordion" href="#collapseFive">
                        <div class="row">
                            <div class="col-10 col-lg-10">
                                <span class="checkout-step-number">5</span>
                                <h4 class="checkout-step-title"><a role="button"> Documents Details</a></h4>
                            </div>
                            <div class="col-2 col-lg-2 text-right d-none d-sm-block d-md-block d-lg-block d-xl-block">
                                <button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn">Edit <i class="fa fa-edit"></i></button>
                            </div>
                            <div class="col-2 col-lg-2 text-right d-md-none d-lg-none">
                                <button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn"><i class="fa fa-edit"></i></button>
                            </div>
                        </div>
                    </div>
                    <div id="collapseFive" class="collapse">
                        <!-- Start collapse body -->
                        <div class="checkout-step-body">
                            <!-- Start row -->
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">First Name</label>
                                                <input id="name" name="name" type="text" placeholder="First Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Middle Name</label>
                                                <input id="name" name="name" type="text" placeholder="Middle Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Last Name</label>
                                                <input id="name" name="name" type="text" placeholder="Last Name" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End row -->
                            <!-- Start row -->
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Mobile No</label>
                                                <input id="name" name="name" type="text" placeholder="+91" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Email Id</label>
                                                <input id="name" name="name" type="text" placeholder="Email Id" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name">Address</label>
                                                <input id="name" name="name" type="text" placeholder="Address" class="form-control input-md" required="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End row -->
                            <!-- Start button row -->
                            <div class="row">
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4 text-right">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <button id="nextBtn" name="nextBtn" class="btn btn-primary">Next</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End button row -->
                        </div>
                        <!-- End collapse body -->
                    </div>
                </div>
                <!-- End Five collapse -->
                <!-- Start Six collapse -->
                <div class="panel checkout-step">
                    <div role="tab" id="headingSix" data-toggle="collapse" data-parent="#accordion" href="#collapseSix">
                        <div class="row">
                            <div class="col-10 col-lg-10">
                                <span class="checkout-step-number">6</span>
                                <h4 class="checkout-step-title"><a role="button"> Reviews </a></h4>
                            </div>
                        </div>
                    </div>
                    <div id="collapseSix" class="collapse">
                        <!-- Start collapse body -->
                        <div class="checkout-step-body">
                            <!-- Start row -->
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name"><strong>Name : </strong></label>
                                                <label class="control-label" for="name">test</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name"><strong>Gender : </strong></label>
                                                <label class="control-label" for="name">Male</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name"><strong>Mobile : </strong></label>
                                                <label class="control-label" for="name">111111111</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End row -->
                            <!-- Start row -->
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name"><strong>Email : </strong></label>
                                                <label class="control-label" for="name">info@example.com</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label class="control-label" for="name"><strong>Address : </strong></label>
                                                <label class="control-label" for="name">test </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class=""></div>
                                </div>
                            </div>
                            <!-- End row -->
                            <!-- Start button row -->
                            <div class="row">
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4 text-right">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <button id="nextBtn" name="nextBtn" class="btn btn-primary">Print</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End button row -->
                        </div>
                        <!-- End collapse body -->
                    </div>
                </div>
                <!-- End Six collapse -->
            </div>
            <!-- End accordion -->
        </div>
    </div>
    <!-- End row -->
    <!-- End Joining Form -->
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Frontend Free Code</a></div>

</body>
</html>
Preview