<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="//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"> <div class="span12"> <p class="lead">Bare minimum radio button tabs example:</p> <div id="tab" class="btn-group pre-scrollable" data-toggle="buttons-radio"> <p> <a href="#prices" class="btn active" data-toggle="tab">Prices</a> <a href="#features" class="btn" data-toggle="tab">Features</a> <a href="#requests" class="btn" data-toggle="tab">Requests</a> <a href="#contact" class="btn" data-toggle="tab">Contact</a> </p> <p> <a href="#prices" class="btn " data-toggle="tab">Prices</a> <a href="#features" class="btn" data-toggle="tab">Features</a> <a href="#requests" class="btn" data-toggle="tab">Requests</a> <a href="#contact" class="btn" data-toggle="tab">Contact</a> </p> <p> <a href="#prices" class="btn " data-toggle="tab">Prices</a> <a href="#features" class="btn" data-toggle="tab">Features</a> <a href="#requests" class="btn" data-toggle="tab">Requests</a> <a href="#contact" class="btn" data-toggle="tab">Contact</a> </p> <p> <a href="#prices" class="btn " data-toggle="tab">Prices</a> <a href="#features" class="btn" data-toggle="tab">Features</a> <a href="#requests" class="btn" data-toggle="tab">Requests</a> <a href="#contact" class="btn" data-toggle="tab">Contact</a> </p> </div> <div class="tab-conten t"> <div class="tab-pane active" id="prices">Prices content</div> <div class="tab-pane" id="features">Features Content</div> <div class="tab-pane" id="requests">Requests Content</div> <div class="tab-pane" id="contact">Contact Content</div> </div> </div> </div> </div>

.pre-scrollable { max-height: 80px; overflow-y: scroll; }