NAV AND PAGINATION IN BOOTSTRAP 5

NAV MENUS

If you want to create a simple horizontal menu, add the .nav class to an <ul> element, followed by .nav-item for each <li> and add the .nav-link class to their links:

ESEMPIO DI CODICE

Copy to Clipboard

Add the .justify-content-center class to center the nav and the .justify-content-end class to right align the nav.

<!– Centered nav –>
<ul class=”nav justify-content-center“>

<!– Right-aligned nav –>
<ul class=”nav justify-content-end“>

VERTICAL NAV

Add the .flex-column class to create a vertical nav:

CODE TO CREATE A VERTICAL NAV

Copy to Clipboard

TABS

Turn the navigation menu into navigation tabs with the .nav-tabs class. Add the .active class to the active/current link. The cards can be activated, as we will see in the last example.

CODE EXAMPLE FOR TABS

Copy to Clipboard

<div class="container mt-3">
  <h2>Navigation Tabs</h2>
  <p>Trasforma il menu di navigazione in schede di navigazione con la classe .nav nav-tabs. 
      Aggiungi la classe attiva al collegamento attivo/corrente.
      Se vuoi che le schede siano commutabili, vedi l'ultimo esempio nella pagina del tutorial.
  </p>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>
</body>
</html>

PILLS

Transform the navigation menu into pills (navigation pills) with the .nav-pills class. If you want the pills to be switchable, see the last example on this page.

<ul class=”nav nav-pills“>
  <li class=”nav-item“>
    <a class=”nav-link active” href=”#”>Active</a>
  </li>
  <li class=”nav-item“>
    <a class=”nav-link” href=”#”>Link</a>
  </li>
</ul>

PILLS CODE WITH DROPDOWN AND TABS WITH DROPDOWN

Copy to Clipboard

<div class="container mt-3">
  <h2>Pills with Dropdown</h2>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Link 1</a></li>
        <li><a class="dropdown-item" href="#">Link 2</a></li>
        <li><a class="dropdown-item" href="#">Link 3</a></li>
      </ul>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>
<hr>
<div class="container mt-3">
    <h2>Tabs with Dropdown</h2>
<ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Link 1</a></li>
        <li><a class="dropdown-item" href="#">Link 2</a></li>
        <li><a class="dropdown-item" href="#">Link 3</a></li>
      </ul>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>
</body>
</html>

DYNAMIC ACTIVATED CARDS

To make tabs focusable, add the data-bs-toggle = “tab” attribute to each link. Then add a .tab-pane class with a unique ID for each tab and wrap them inside a <div> element with .tab-content class. If you want the tabs to fade in and out when you click them, add the .fade class to the .tab pane:

EXAMPLE CODE FOR PILLS AND TABS

Copy to Clipboard

<div class="container mt-3">
  <h2>Toggleable Tabs</h2>
  <br>
  
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
    </li>
  </ul>

<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>
    <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>
    <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>
</div>
</body>
</html>

Copy to Clipboard

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <script type="rocketlazyloadscript" data-minify="1" data-rocket-src="https://83dc87d8.delivery.rocketcdn.me/wp-content/cache/min/1/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js?ver=1746910757" data-rocket-defer defer></script>
</head>
<body>
<div class="container mt-3">
  <h2>Toggleable Pills</h2>
  <br>
  
  <ul class="nav nav-pills" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-bs-toggle="pill" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="pill" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="pill" href="#menu2">Menu 2</a>
    </li>
  </ul>

<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>
    <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>
    <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>
</div>
</body>
</html>

BOOTSTRAP 5 PAGINATION

If you have a website with many pages, you may want to add some sort of pagination to each page.

To create a basic pagination, add the .pagination class to a <ul> element. Then add .page-item to each <li> element and a .page-link class to each link within <li>:

Copy to Clipboard

<div class="container mt-3">
  <h2>Pagination</h2>
  <p>Per creare un'impaginazione di base, aggiungi la classe .pagination a un elemento ul. 
      Quindi aggiungi .page-item a ciascun elemento li e una classe .page-link a ciascun collegamento 
      all'interno di li:</p>                  
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</div>
</body>
</html>

ACTIVE STATE

The .active class is used to “highlight” the current page.

Copy to Clipboard

DISABLE THE STATE

The .disabled class is used for non-clickable links:

SIZE OF PAGINATION

Add the .pagination-lg class for larger blocks or .pagination-sm for smaller blocks:

LINKS TO PREVIOUS POST

BOOTSTRAP 5

LINK TO THE CODE ON GITHUB

GITHUB