<h2>Toggleable Tabs</h2>
<!--'role="tablist"' detta är en fliknavigering-->
<ul class="nav nav-tabs" role="tablist">
    <!-- Första fliken (aktiv som standard) -->
    <li class="nav-item">
        <!-- 'href="#home"' - länkar till innehållsdelen med id="home" -->
        <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
    </li>
    <!-- Andra fliken -->
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
    </li>
    <!-- Tredje fliken -->
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
    </li>
</ul>
<!--TABBS INNEHÅLL - Här finns det faktiska innehållet som visas när flikarna klickas-->
<div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
        <h3>HOME</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <!-- Andra innehållssektionen (Menu 1) -->
    <div id="menu1" class="container tab-pane fade"><br>
        <h3>Menu 1</h3>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <!-- Tredje innehållssektionen (Menu 2) -->
    <div id="menu2" class="container tab-pane fade"><br>
        <h3>Menu 2</h3>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
</div>

Tabs exempel

Takes the basic nav and adds the .nav-tabs class to generate a tabbed interface. To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.


HOME

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.