❮ Bootstrap4 Makeawebsite Bootstrap4 Typography ❯

Bootstrap4 Navigation

If you want to create a simple horizontal navigation bar, you can add the .nav class to the <ul> element, the .nav-item class to each <li> item, and the .nav-link class to each link:

Example

<ul class="nav">
  <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" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Navigation Alignment

The .justify-content-center class centers the navigation, and the .justify-content-end class aligns the navigation to the right.

Example

<!-- Center Navigation -->
<ul class="nav justify-content-center">

<!-- Right-aligned Navigation -->
<ul class="nav justify-content-end">
</div>

Vertical Navigation

The .flex-column class is used to create vertical navigation:

Example

<ul class="nav flex-column">

Tabs

The .nav-tabs class can turn the navigation into tabs. Then use the .active class to mark the selected option.

Example

<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>

Pill Navigation

The .nav-pills class can set the navigation items to a pill shape.

Example

<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>
  <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>

Equal Width Navigation

The .nav-justified class can set the navigation items to display in equal width and justified.

Example

<ul class="nav nav-pills nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>

Pill Dropdown Menu

Example

<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-toggle="dropdown" href="#">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>

<a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </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>


---

## Tab Dropdown Menu

## Example

<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-toggle="dropdown" href="#">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </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>


---

## Dynamic Tabs

If you want to make the tabs switchable, you can add the `data-toggle="tab"` attribute to each link. Then add the `.tab-pane` class to the content of each tab, and use the `.tab-content` class for the `<div>` element corresponding to the tab content.

If you want a fade effect, you can add the `.fade` class after `.tab-pane`:

## Example

<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a> </li> </ul>

<div class="tab-content"> <div class="tab-pane active container" id="home">...</div> <div class="tab-pane container" id="menu1">...</div> <div class="tab-pane container" id="menu2">...</div> </div>


---

## Dynamic Pills

To make dynamic pills, simply set the `data-toggle` attribute to `data-toggle="pill"` in the above example:

## Example

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" data-toggle="pill" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a> </li> <li class="nav-item">

❮ Bootstrap4 Makeawebsite Bootstrap4 Typography ❯