"Bootstrap Tabs Examples Horizontal and Vertical (Classical, Floating, Pills)"
Bootstrap 4.1.1 Snippet by abhimanyusankhyan4

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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="p-4"> <!--Classic Tabs Secton--> <div class="classic-tab-wrap py-3"> <div class="heading-tab"> <h3>Horizontal - Classic Tabs</h3> </div> <div class="tab-wrap"> <ul class="nav nav-tabs" id="classicTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="classic-1-tab" data-toggle="tab" href="#classic-1" role="tab" aria-controls="classic-1" aria-selected="true"><i class="fa fa-thumbs-up" aria-hidden="true"></i>First</a> </li> <li class="nav-item"> <a class="nav-link" id="classic-2-tab" data-toggle="tab" href="#classic-2" role="tab" aria-controls="classic-2" aria-selected="false"><i class="fa fa-thumbs-up" aria-hidden="true"></i>Second</a> </li> <li class="nav-item"> <a class="nav-link" id="classic-3-tab" data-toggle="tab" href="#classic-3" role="tab" aria-controls="classic-3" aria-selected="false"><i class="fa fa-thumbs-up" aria-hidden="true"></i>Third</a> </li> </ul> <div class="tab-content" id="classicTabContent"> <div class="tab-pane fade show active" id="classic-1" role="tabpanel" aria-labelledby="classic-1-tab"> classic Tab 1 </div> <div class="tab-pane fade" id="classic-2" role="tabpanel" aria-labelledby="classic-2-tab"> classic Tab 2 </div> <div class="tab-pane fade" id="classic-3" role="tabpanel" aria-labelledby="classic-3-tab"> classic Tab 3 </div> </div> </div> </div> <!--Floating Tabs - Horizontal Section --> <div class="floating floatingH-tab-wrap py-3"> <div class="heading-tab"> <h3>Floating Tabs - Horizontal</h3> </div> <div class="tab-wrap"> <div class="tab-head"> <ul class="nav nav-tabs" id="floatingHTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="floatingH-1-tab" data-toggle="tab" href="#floatingH-1" role="tab" aria-controls="floatingH-1" aria-selected="true"><i class="fa fa-thumbs-up" aria-hidden="true"></i>First</a> </li> <li class="nav-item"> <a class="nav-link" id="floatingH-2-tab" data-toggle="tab" href="#floatingH-2" role="tab" aria-controls="floatingH-2" aria-selected="false"><i class="fa fa-thumbs-up" aria-hidden="true"></i>Second</a> </li> <li class="nav-item"> <a class="nav-link" id="floatingH-3-tab" data-toggle="tab" href="#floatingH-3" role="tab" aria-controls="floatingH-3" aria-selected="false"><i class="fa fa-thumbs-up" aria-hidden="true"></i>Third</a> </li> </ul> </div> <div class="tab-content" id="floatingHTabContent"> <div class="tab-pane fade show active" id="floatingH-1" role="tabpanel" aria-labelledby="floatingH-1-tab"> floatingH Tab 1 </div> <div class="tab-pane fade" id="floatingH-2" role="tabpanel" aria-labelledby="floatingH-2-tab"> floatingH Tab 2 </div> <div class="tab-pane fade" id="floatingH-3" role="tabpanel" aria-labelledby="floatingH-3-tab"> floatingH Tab 3 </div> </div> </div> </div> <!--Floating Tabs - Horizontal Section --> <!--Pills Tabs - Horizontal Section --> <div class="pills pillsH-tab-wrap py-3"> <div class="heading-tab"> <h3>Pills Tabs - Horizontal</h3> </div> <div class="tab-wrap"> <div class="tab-head"> <ul class="nav nav-tabs" id="pillsHTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="pillsH-1-tab" data-toggle="tab" href="#pillsH-1" role="tab" aria-controls="pillsH-1" aria-selected="true"><i class="fa fa-thumbs-up" aria-hidden="true"></i>First</a> </li> <li class="nav-item"> <a class="nav-link" id="pillsH-2-tab" data-toggle="tab" href="#pillsH-2" role="tab" aria-controls="pillsH-2" aria-selected="false"><i class="fa fa-thumbs-up" aria-hidden="true"></i>Second</a> </li> <li class="nav-item"> <a class="nav-link" id="pillsH-3-tab" data-toggle="tab" href="#pillsH-3" role="tab" aria-controls="pillsH-3" aria-selected="false"><i class="fa fa-thumbs-up" aria-hidden="true"></i>Third</a> </li> </ul> </div> <div class="tab-content" id="pillsHTabContent"> <div class="tab-pane fade show active" id="pillsH-1" role="tabpanel" aria-labelledby="pillsH-1-tab"> pillsH Tab 1 </div> <div class="tab-pane fade" id="pillsH-2" role="tabpanel" aria-labelledby="pillsH-2-tab"> pillsH Tab 2 </div> <div class="tab-pane fade" id="pillsH-3" role="tabpanel" aria-labelledby="pillsH-3-tab"> pillsH Tab 3 </div> </div> </div> </div> <!--Pills Tabs - Horizontal Section Ends--> <!-- Floating Tabs - Vertical Section --> <div class="pills floatingV-tab-wrap py-3"> <div class="heading-tab"> <h3>Floating Tabs - Vertical</h3> </div> <div class="tab-wrap"> <div class="row"> <div class="col-3"> <div class="nav flex-column nav-pills" id="floatingV-tab" role="tablist" aria-orientation="vertical"> <a class="nav-link active" id="floatingV-tab-1-tab" data-toggle="pill" href="#floatingV-tab-1" role="tab" aria-controls="floatingV-tab-1" aria-selected="true">Home</a> <a class="nav-link" id="floatingV-tab-2-tab" data-toggle="pill" href="#floatingV-tab-2" role="tab" aria-controls="floatingV-tab-2" aria-selected="false">Profile</a> <a class="nav-link" id="floatingV-tab-3-tab" data-toggle="pill" href="#floatingV-tab-3" role="tab" aria-controls="floatingV-tab-3" aria-selected="false">Messages</a> </div> </div> <div class="col-9"> <div class="tab-content" id="floatingV-tabContent"> <div class="tab-pane fade show active" id="floatingV-tab-1" role="tabpanel" aria-labelledby="floatingV-tab-1-tab"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> <div class="tab-pane fade" id="floatingV-tab-2" role="tabpanel" aria-labelledby="floatingV-tab-2-tab"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </p> </div> <div class="tab-pane fade" id="floatingV-tab-3" role="tabpanel" aria-labelledby="floatingV-tab-3-tab"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p> </div> </div> </div> </div> </div> </div> <!--Floating Tabs - Vertical Ends--> <!-- Pills Tabs - Vertical Section --> <div class="pills pillsV-tab-wrap py-3"> <div class="heading-tab"> <h3>Pills Tabs - Vertical</h3> </div> <div class="tab-wrap"> <div class="row"> <div class="col-3"> <div class="nav flex-column nav-pills" id="pillsV-tab" role="tablist" aria-orientation="vertical"> <a class="nav-link active" id="pillsV-tab-1-tab" data-toggle="pill" href="#pillsV-tab-1" role="tab" aria-controls="pillsV-tab-1" aria-selected="true">Home</a> <a class="nav-link" id="pillsV-tab-2-tab" data-toggle="pill" href="#pillsV-tab-2" role="tab" aria-controls="pillsV-tab-2" aria-selected="false">Profile</a> <a class="nav-link" id="pillsV-tab-3-tab" data-toggle="pill" href="#pillsV-tab-3" role="tab" aria-controls="pillsV-tab-3" aria-selected="false">Messages</a> </div> </div> <div class="col-9"> <div class="tab-content" id="pillsV-tabContent"> <div class="tab-pane fade show active" id="pillsV-tab-1" role="tabpanel" aria-labelledby="pillsV-tab-1-tab"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> <div class="tab-pane fade" id="pillsV-tab-2" role="tabpanel" aria-labelledby="pillsV-tab-2-tab"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </p> </div> <div class="tab-pane fade" id="pillsV-tab-3" role="tabpanel" aria-labelledby="pillsV-tab-3-tab"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p> </div> </div> </div> </div> </div> </div> <!-- Pills Tabs - Vertical Ends--> </div>
/**Classic Tabs Wrap**/ .classic-tab-wrap .tab-wrap { padding: 20px; background: #f5f5f5; } .classic-tab-wrap .tab-wrap .nav-tabs li { margin: 0; } .classic-tab-wrap .tab-wrap .nav-tabs li a { font-weight: 500; font-size: 18px; color: #8a8a8a; border: none; border-bottom: 2px solid transparent; padding-left: 35px; padding-right: 35px; } .classic-tab-wrap .tab-wrap .nav-tabs li a.active { color: #495057; background: transparent; border-color: #495ab7; } .classic-tab-wrap .tab-wrap .nav-tabs li a i { margin-right: 6px; } .classic-tab-wrap .tab-wrap .tab-pane { padding: 20px; } .viewBtn { padding-left: 20px; padding-right: 20px; outline: none !important; box-shadow: none !important; } /**Floating**/ .floating .tab-wrap .nav-tabs { padding: 18px; border: none; background: #5e8acf; border-radius: 7px; } .floating .tab-wrap .nav-tabs .nav-item { margin: 0; width: 33.33%; text-align: center; } .floating .tab-wrap .nav-tabs .nav-item a { color: #fff; font-weight: 400; font-size: 18px; border: none; padding-left: 35px; padding-right: 35px; opacity: 1; } .floating .tab-wrap .nav-tabs .nav-item a.active { background: #324295; border-radius: 5px; box-shadow: 0 0 10px #32429591; } .floating .tab-wrap .nav-tabs .nav-item a i { margin: 0 5px 0 0; } /*Floating H*/ .floatingH-tab-wrap .tab-content { padding: 70px 20px 30px 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin-top: -40px; } .floatingH-tab-wrap .tab-head { padding: 0 20px; position: relative; z-index: 1; } /**Pills Tabs - Horizontal**/ .pillsH-tab-wrap .tab-head { padding: 10px; } .pillsH-tab-wrap .tab-head .nav-tabs { border: none; } .pillsH-tab-wrap .tab-head .nav-tabs .nav-item { margin: 0; width: 33.33%; text-align: center; } .pillsH-tab-wrap .tab-head .nav-tabs .nav-item a { color: #666666; font-weight: 400; font-size: 18px; border: none; padding-left: 35px; padding-right: 35px; opacity: 1; border-radius: 5px; } .pillsH-tab-wrap .tab-head .nav-tabs .nav-item a.active { background: #2bbbad; color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .pillsH-tab-wrap .tab-head .nav-tabs .nav-item a i { margin-right: 5px; } .pillsH-tab-wrap .tab-content { padding: 30px 20px 30px 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } /**Pills Tabs - Horizontal Ends**/ /**Floating Tabs - Vertical **/ .floatingV-tab-wrap .nav { padding: 18px; border: none; background: #4051b6; border-radius: 7px; } .floatingV-tab-wrap .nav .nav-link.active { background: #324295; box-shadow: 0 0 10px #32429591; } .floatingV-tab-wrap .nav .nav-link { color: #fff; font-weight: 400; font-size: 18px; border: none; text-align: center; padding-top: 10px; padding-bottom: 10px; } .floatingV-tab-wrap .tab-content { padding: 30px 20px 30px 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } /**Floating Tabs - Vertical Ends **/ /**Pills Tabs - Vertical Section**/ .pillsV-tab-wrap .tab-content { padding: 30px 20px 30px 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .pillsV-tab-wrap .nav { padding: 18px; border: none; } .pillsV-tab-wrap .nav .nav-link { margin: 0 0 10px 0; font-weight: 400; font-size: 18px; border: none; text-align: center; padding-top: 10px; padding-bottom: 10px; color: #666666; } .pillsV-tab-wrap .nav .nav-link:hover { background: #e2e2e2; } .pillsV-tab-wrap .nav .nav-link.active { background: #2bbbad; color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } /**Pills Tabs - Vertical Section Ends**/

Related: See More


Questions / Comments: