"bootstrap 4 vertical tabs"
Bootstrap 4.0.0 Snippet by dkstudio

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <br> <div class="container"> <h2>bootstrap 4 vertical tabs</h2> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home" role="tabpanel">1</div> <div class="tab-pane" id="profile" role="tabpanel">..2.</div> <div class="tab-pane" id="messages" role="tabpanel">.3..</div> <div class="tab-pane" id="settings" role="tabpanel">.4..</div> </div> <script> </script> </div> </body> </html>
.nav.nav-tabs { float: left; display: block; margin-right: 20px; border-bottom:0; border-right: 1px solid #ddd; padding-right: 15px; } .nav-tabs .nav-link { border: 1px solid transparent; border-top-left-radius: .25rem; border-top-right-radius: .25rem; background: #ccc; } .nav-tabs .nav-link.active { color: #495057; background-color:#007bff !important; border-color: transparent !important; } .nav-tabs .nav-link { border: 1px solid transparent; border-top-left-radius: 0rem!important; border-top-right-radius: 0rem!important; } .tab-content>.active { display: block; background: #007bff; min-height: 165px; } .nav.nav-tabs { float: left; display: block; margin-right: 20px; border-bottom: 0; border-right: 1px solid transparent; padding-right: 15px; }

Related: See More

Argon Design System
Simple Vertical timeline
Tabs style 1
Bootstrap Tabs with Table

Questions / Comments: