<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <link rel="stylesheet" href="https://fontawesome.com/v4.7.0/assets/font-awesome/css/font-awesome.css"> <div class="bg-light my-5 py-5"> <div class="container"> <div class="row"> <div class="col-4"> <div class="card mb-4 shadow"> <div class="media p-3 align-items-center"> <i class="icon-control fa fa-user"></i> <div class="media-body ml-2"> <span>Hello</span> <h5 class="mt-0">Pankaj</h5> </div> </div> </div> <div class="card shadow"> <div class="nav flex-column" id="v-pills-tab" role="tablist" aria-orientation="vertical"> <ul class="list-group list-group-flush"> <li class="list-group-item"><a class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="true"><h6>Report Found <i class="icon-control fa fa-chevron-right pull-right"></i></h6></a></li> <li class="list-group-item"><h6>Accounts Setting</h6> <ul class="list-group list-inline"> <li><a data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false" >Profile Information</a></li> <li><a href="#">Manage Addresses</a></li> </ul> </li> <li class="list-group-item"><h6>My Reports</h6> <ul class="list-group list-inline"> <li><a href="#">Report List</a></li> <li><a href="#">All Notification</a></li> </ul> </li> <li class="list-group-item"> <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-chat" role="tab" aria-controls="v-pills-chat" aria-selected="false"><h6>My Chats <i class="icon-control fa fa-chevron-right pull-right"></i></h6> </a></li> <li class="list-group-item"> <a class="nav-link"><h6>LogOut</h6> </a></li> </ul> </div> </div> <div class="card mt-4 shadow"> <div class="p-3"> <h6>Frequently Visited</h6> <ul class="d-flex list-inline"> <li>Change Password</li> <li class="ml-2">Track Order</li> <li class="ml-2">help center</li> </ul> </div> </div> </div> <div class="col-8"> <div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"> <div class="card shadow"> <div class="card-body"> <div class="bg-light p-4"> <form> <h6 class="text-primary mb-4">Edite your profile</h6> <div class="form-group row"> <div class="col-sm-4"> <input type="text" class="form-control rounded-0 form-control-lg" id="name" value="Name"> </div> </div> <div class="form-group row"> <div class="col-sm-4"> <input type="text" class="form-control rounded-0 form-control-lg" id="mobile" value="10-Digit Mobile Number"> </div> <div class="col-sm-4"> <input type="email" class="form-control rounded-0 form-control-lg" id="email" value="Enter your Email ID"> </div> </div> <h6 class="text-primary my-4">Select State & City</h6> <div class="form-group row"> <div class="col-sm-4"> <select class="form-control form-control-lg rounded-0"> <option>Select State </option> </select> </div> <div class="col-sm-4"> <select class="form-control form-control-lg rounded-0"> <option>Select City</option> </select> </div> </div> <div class="form-group row"> <div class="col-sm-4"> <input class="btn btn-primary btn-lg btn-block rounded-0" type="submit" value="SAVE"> </div> <div class="col-sm-4"> <input class="btn btn-outline-primary btn-lg btn-block rounded-0" type="submit" value="CANCEL"> </div> </div> </form> </div> <h4 class="my-4">FAQ</h4> <div id="accordion" class="accordion policy_content"> <div class="card mb-0"> <div class="card-header collapsed" data-toggle="collapse" href="#collapseOne"> <a class="card-title"><b> Q1.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry.? </a> </div> <div id="collapseOne" class="card-body collapse show" data-parent="#accordion"> <p><b>A1.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> <div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> <a class="card-title"><b> Q2.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a> </div> <div id="collapseTwo" class="card-body collapse" data-parent="#accordion"> <p><b>A2.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </div> <div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3"> <a class="card-title"><b> Q3.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a> </div> <div id="collapse3" class="card-body collapse" data-parent="#accordion"> <p><b>A3.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </div> </div> </div> <h6 class="text-primary my-4">Deactivate Account</h6> </div> </div> </div> <div class="tab-pane fade" id="v-pills-chat" role="tabpanel" aria-labelledby="v-pills-chat-tab">...</div> <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab"> <div class="card shadow"> <div class="card-body"> <div class="bg-light p-4"> <form> <h6 class="text-primary mb-4">Edite your profile</h6> <div class="form-group row"> <div class="col-sm-4"> <input type="text" class="form-control rounded-0 form-control-lg" id="name" value="Name"> </div> </div> <div class="form-group row"> <div class="col-sm-4"> <input type="text" class="form-control rounded-0 form-control-lg" id="mobile" value="10-Digit Mobile Number"> </div> <div class="col-sm-4"> <input type="email" class="form-control rounded-0 form-control-lg" id="email" value="Enter your Email ID"> </div> </div> <h6 class="text-primary my-4">Select State & City</h6> <div class="form-group row"> <div class="col-sm-4"> <select class="form-control form-control-lg rounded-0"> <option>Select State </option> </select> </div> <div class="col-sm-4"> <select class="form-control form-control-lg rounded-0"> <option>Select City</option> </select> </div> </div> <div class="form-group row"> <div class="col-sm-4"> <input class="btn btn-primary btn-lg btn-block rounded-0" type="submit" value="SAVE"> </div> <div class="col-sm-4"> <input class="btn btn-outline-primary btn-lg btn-block rounded-0" type="submit" value="CANCEL"> </div> </div> </form> </div> </div> </div> </div> </div> </div> </div>

.accordion .card-header.collapsed:after { content: "\f067"; } .accordion .card-header:after { font-family: 'FontAwesome'; content: "\f068"; float: right; }