<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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="container"> <div class="row"> <!-- Tabs --> <div class="col-md-3"> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Tab 1</a></li> <li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Tab 2</a></li> <li role="presentation"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">Tab 3</a></li> </ul> </div> <!-- Tab panes --> <div class="col-md-9"> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="tab1"> <p>Content for Tab 1</p> </div> <div role="tabpanel" class="tab-pane" id="tab2"> <p>Content for Tab 2</p> </div> <div role="tabpanel" class="tab-pane" id="tab3"> <p>Content for Tab 3</p> </div> </div> </div> </div> </div>