Using tab component with list group example

Bootstrap 4 Code

Output

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>List Group with Tab content demo</h3>
<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action " id="bootstrap-list-item" data-toggle="list" href="#bootstrap-list" role="tab" aria-controls="bootstrap">Bootstrap</a>
      <a class="list-group-item list-group-item-action active" id="jquery-list-item" data-toggle="list" href="#jquery-list" role="tab" aria-controls="jquery">jQuery</a>
      <a class="list-group-item list-group-item-action" id="html-list-item" data-toggle="list" href="#html-list" role="tab" aria-controls="html">HTML</a>
      <a class="list-group-item list-group-item-action" id="css-list-item" data-toggle="list" href="#css-list" role="tab" aria-controls="css">CSS</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane" id="bootstrap-list" role="tabpanel" aria-labelledby="bootstrap-list-item">Some content linked with 1. </div>
      <div class="tab-pane show active" id="jquery-list" role="tabpanel" aria-labelledby="jquery-list-item">Some content linked with Tab2. </div>
      <div class="tab-pane" id="html-list" role="tabpanel" aria-labelledby="html-list-item">Some content linked with Tab3. </div>
      <div class="tab-pane" id="css-list" role="tabpanel" aria-labelledby="css-list-item">Some content linked with Tab4. </div>
    </div>
  </div>
</div>
</div>

</body>
</html>

List Group with Tab content demo

Bootstrap jQuery HTML CSS

Some content linked with 1.

Some content linked with Tab2.

Some content linked with Tab3.

Some content linked with Tab4.