<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="//code.jquery.com/jquery-1.11.1.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 ----------> <div class="content_box"> <div class="left_bar"> <ul class=" nav-tabs--vertical nav" role="navigation"> <li class="nav-item"> <a href="#lorem" class="nav-link active text-wrap" data-toggle="tab" role="tab" aria-controls="lorem">2.1 Planning language learning </a> </li> <li class="nav-item"> <a href="#ipsum" class="nav-link text-wrap" data-toggle="tab" role="tab" aria-controls="ipsum">2.2 Using language-learning resources and materials </a> </li> <li class="nav-item"> <a href="#dolor" class="nav-link text-wrap " data-toggle="tab" role="tab" aria-controls="dolor">2.3 Managing language learning </a> </li> <li class="nav-item"> <a href="#sit-amet" class="nav-link text-wrap" data-toggle="tab" role="tab" aria-controls="sit-amet">2.4 Teaching language systems </a> </li> </ul> </div> <div class="right_bar "> <div class="tab-content "> <div class="tab-pane fade show active" id="lorem" role="tabpanel"> <!-- <div class="row">--> <!-- <div class="col-md-4">--> <!-- <p> <b>Tester</b> </p>--> <!-- <p> UI Developer</p>--> <!-- </div>--> <!-- <div class="col-md-8 text-right">--> <!-- <p> +91-938923748 </p>--> <!-- <p> Test@gamil.com </p>--> <!-- </div>--> <!-- <div class="col-md-12">--> <!-- <hr style="margin:5px 0;"/> --> <!-- <dl class="row">--> <!-- <dt class="col-sm-2">Description lists :</dt>--> <!-- <dd class="col-sm-10"> <p>--> <!-- <small>Collaborate closely with project management and development to conceptualize, design, and prototype web features and applications--> <!--Work with cross-functional teams to create UI components and designs--> <!--Create static and dynamic prototypes--> <!--Assist with the development of front-end features--> <!--Create front-end applications from concept to implementation--> <!--Conceptualize ideas that bring simplicity and user friendliness to complex design roadblocks--> <!--Create wireframes, storyboards, user flows, process flows, and site maps to effectively communicate ideas--> <!--Work with development and QA teams to ensure compatibility and quality--> <!--Conduct user research and evaluate user feedback--> <!--Other duties as assigned</small>--> <!-- </p></dd>--> <!-- <dt class="col-sm-2">Education :</dt>--> <!-- <dd class="col-sm-10">--> <!-- <p>--> <!-- <small>Collaborate closely with project management and development to conceptualize, design, and prototype web features and applications--> <!--Work with cross-functional teams</small>--> <!--</p>--> <!-- </dd>--> <!-- <dt class="col-sm-2">Experience :</dt>--> <!-- <dd class="col-sm-10">--> <!-- <p>--> <!-- <small>7 Years</small>--> <!--</p>--> <!-- </dd>--> <!-- <dt class="col-sm-2">Score :</dt>--> <!-- <dd class="col-sm-10">--> <!-- <p>--> <!-- <small>78.023</small>--> <!--</p>--> <!-- </dd>--> <!--</dl>--> <!-- </div>--> <!-- </div>--> <table class="table table-bordered"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> <div class="tab-pane fade" id="ipsum" role="tabpanel"> <table class="table table-bordered"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> <div class="tab-pane fade" id="dolor" role="tabpanel"> <table class="table table-bordered"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> <div class="tab-pane fade" id="sit-amet" role="tabpanel"> <table class="table table-bordered"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> </div> </div> </div>

.content_box{ float:left; width:100%; } .left_bar{ float:left; width:15%; background:#eaf4ff; height:100vh; } .right_bar{ float:left; width:85%; padding:15px; /*border-left:1px solid #ccc;*/ height:100%; } .nav-tabs--vertical li{ float:left; width:100%; padding:0; position:relative; } .nav-tabs--vertical li a{ float:left; width:100%; padding: 15px; border-bottom:1px solid #adcff7; color:#1276F0; font-size:18px; } .nav-tabs--vertical li a.active::after { content: ""; border-color: #1276F0; border-style: solid; position: absolute; right: -8px; /* border-top: transparent; */ border-right: transparent; border-left: 15px solid transparent; border-right: 15px solid transparent; /*border-bottom: 16px solid #1276F0;*/ border-bottom: 16px solid #fff; border-top: 0; transform: rotate(270deg); z-index:999; }