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 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 active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">Some content linked with 1. Some content linked with Tab1. Some content linked with Tab1. Some content linked with 1. Some content linked with Tab1. Some content linked with Tab1.</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">Some content linked with Tab2. Some content linked with Tab2. Some content linked with Tab2. Some content linked with Tab2. Some content linked with Tab2. Some content linked with Tab2. Some content linked with Tab2. Some content linked with Tab2.</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">Some content linked with Tab3. Some content linked with Tab3. Some content linked with Tab3. Some content linked with Tab3.Some content linked with Tab3. Some content linked with Tab3. Some content linked with Tab3. Some content linked with Tab3.</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">Some content linked with Tab4. Some content linked with Tab4. Some content linked with Tab4. Some content linked with Tab4. Some content linked with Tab4. Some content linked with Tab4. Some content linked with Tab4. Some content linked with Tab4.</div>
    </div>
  </div>
</div>
</div>

</body>
</html>

List Group with content demo

Home Profile Messages Settings

Some content linked with 1. Some content linked with Tab1. Some content linked with Tab1. Some content linked with 1. Some content linked with Tab1. Some content linked with Tab1.

Some content linked with Tab2. Some content linked with Tab2. Some content linked with Tab2. Some content linked with Tab2. Some content linked with Tab2. Some content linked with Tab2. Some content linked with Tab2. Some content linked with Tab2.

Some content linked with Tab3. Some content linked with Tab3. Some content linked with Tab3. Some content linked with Tab3.Some content linked with Tab3. Some content linked with Tab3. Some content linked with Tab3. Some content linked with Tab3.

Some content linked with Tab4. Some content linked with Tab4. Some content linked with Tab4. Some content linked with Tab4. Some content linked with Tab4. Some content linked with Tab4. Some content linked with Tab4. Some content linked with Tab4.