Tabs

Used to show more content on the page view by view

Code Example

<div class="nav nav-tabs" id="nav-tab" role="tablist">
  <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
  <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile / Information</button>
  <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</button>
</div>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
    <h2>Home</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat, dolor in varius congue, justo mauris tincidunt eros, sit amet porta massa nibh at augue. Nullam velit mauris, eleifend sit amet gravida at, pretium at mauris. Nullam sed dignissim quam, non ullamcorper nisl. Donec rhoncus ultrices dictum. Vivamus lacinia tempor nulla, in blandit orci facilisis nec. Mauris pharetra tempor neque quis maximus. Nunc pulvinar metus a dolor tempus semper. Proin posuere vitae massa ac bibendum. Cras ultricies quis tortor vel varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et arcu nibh. Duis ultrices urna et metus volutpat hendrerit ac vitae lectus. Mauris hendrerit tortor eu ultrices elementum. Aenean congue tempor pharetra. Donec interdum luctus convallis. Fusce pellentesque ante nec dui ultricies hendrerit vel at orci.
     </p>
  </div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">Profile</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">Contact</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">dis</div>
</div>