Bootstarp 5 Tabs by Suman Output View Horizontal Vertical HTML CSS JS Tidy <div class="container mt-4 d-flex justify-content-center"> <div class="card shaodw-lg card-1"> <div class="card-header pt-3 pb-0 ml-auto border-0 "> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link active" id="simple-tab-0" data-bs-toggle="tab" href="#simple-tabpanel-0" role="tab" aria-controls="simple-tabpanel-0" aria-selected="true">Tab 1</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="simple-tab-1" data-bs-toggle="tab" href="#simple-tabpanel-1" role="tab" aria-controls="simple-tabpanel-1" aria-selected="false">Tab 2</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="simple-tab-2" data-bs-toggle="tab" href="#simple-tabpanel-2" role="tab" aria-controls="simple-tabpanel-2" aria-selected="false">Tab 3</a> </li> </ul> <div class="tab-content pt-5" id="tab-content"> <div class="tab-pane active" id="simple-tabpanel-0" role="tabpanel" aria-labelledby="simple-tab-0"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam placerat eleifend dolor, nec suscipit nisl pellentesque laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse ut interdum justo, sed ullamcorper tortor. Pellentesque pulvinar vitae massa nec auctor. Mauris imperdiet nisi at ante suscipit, quis volutpat enim porttitor. Nam sed ultricies est. Curabitur ipsum nulla, finibus quis commodo ut, pulvinar ut orci. Praesent condimentum consectetur condimentum. Donec varius quam nibh, ut varius lectus scelerisque eu. Donec eu ex rhoncus, accumsan magna at, facilisis dui. Cras tempor eget odio nec interdum. In vestibulum lacinia augue nec malesuada. Proin vitae volutpat nulla, nec posuere purus. Praesent vel ullamcorper nibh. Mauris elit dolor, ullamcorper quis blandit quis, suscipit et elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> </div> <div class="tab-pane" id="simple-tabpanel-1" role="tabpanel" aria-labelledby="simple-tab-1"> <p> Nam sed ultricies est. Curabitur ipsum nulla, finibus quis commodo ut, pulvinar ut orci. Praesent condimentum consectetur condimentum. Donec varius quam nibh, ut varius lectus scelerisque eu. Donec eu ex rhoncus, accumsan magna at, facilisis dui. Cras tempor eget odio nec interdum. In vestibulum lacinia augue nec malesuada. Proin vitae volutpat nulla, nec posuere purus. Praesent vel ullamcorper nibh. Mauris elit dolor, ullamcorper quis blandit quis, suscipit et elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> </div> <div class="tab-pane" id="simple-tabpanel-2" role="tabpanel" aria-labelledby="simple-tab-2"> <p> Suspendisse ut interdum justo, sed ullamcorper tortor. Pellentesque pulvinar vitae massa nec auctor. Mauris imperdiet nisi at ante suscipit, quis volutpat enim porttitor. Nam sed ultricies est. Curabitur ipsum nulla, finibus quis commodo ut, pulvinar ut orci. Praesent condimentum consectetur condimentum. Donec varius quam nibh, ut varius lectus scelerisque eu. Donec eu ex rhoncus, accumsan magna at, facilisis dui. Cras tempor eget odio nec interdum. In vestibulum lacinia augue nec malesuada. Proin vitae volutpat nulla, nec posuere purus. Praesent vel ullamcorper nibh. Mauris elit dolor, ullamcorper quis blandit quis, suscipit et elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> </div> </div> </div> </div> HTML CSS JS Tidy HTML CSS JS Tidy >_Console Clear Console >_Console File Setting HTML Code Playground Setting Title Description Bootstrap 5 Tabs component, Responsive tabs build with the latest Bootstrap 5. Catagory Bootstrap Tags Bootstrap5 Tabs Resource Add External Stylesheets and Script <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" /> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"> </script>
