<!-- Navbar -->

<nav class="navbar navbar-expand-lg navbar-light bg-light">

  <!-- Container wrapper -->

  <div class="container-fluid">

    <!-- Navbar brand -->

    <a class="navbar-brand" href="#">Brand</a>

​

    <!-- Toggle button -->

    <button

      class="navbar-toggler"

      type="button"

      data-toggle="collapse"

      data-target="#navbarSupportedContent"

      aria-controls="navbarSupportedContent"

      aria-expanded="false"

      aria-label="Toggle navigation"

    >

      <i class="fas fa-bars"></i>

    </button>

​

    <!-- Collapsible wrapper -->

    <div class="collapse navbar-collapse" id="navbarSupportedContent">

      <!-- Left links -->

      <ul class="navbar-nav mr-auto mb-2 mb-lg-0">

        <li class="nav-item">

          <a class="nav-link active" aria-current="page" href="#">Home</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="#">Link</a>

        </li>

        <!-- Navbar dropdown -->

        <li class="nav-item dropdown">

          <a

            class="nav-link dropdown-toggle"

            href="#"

            id="navbarDropdown"

            role="button"

            data-toggle="dropdown"

            aria-expanded="false"

          >

            Dropdown

          </a>

          <!-- Dropdown menu -->

          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">

            <li><a class="dropdown-item" href="#">Action</a></li>

            <li><a class="dropdown-item" href="#">Another action</a></li>

            <li><hr class="dropdown-divider" /></li>

            <li>

              <a class="dropdown-item" href="#">Something else here</a>

            </li>

          </ul>

        </li>

        <li class="nav-item">

          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"

            >Disabled</a

          >

        </li>

      </ul>

      <!-- Left links -->

​

      <!-- Search form -->

      <form class="d-flex input-group w-auto">

        <input

          type="search"

          class="form-control"

          placeholder="Type query"

          aria-label="Search"

        />

        <button class="btn btn-outline-primary" type="button" data-ripple-color="dark">

          Search

        </button>

      </form>

    </div>

    <!-- Collapsible wrapper -->

  </div>

  <!-- Container wrapper -->

</nav>

<!-- Navbar -->

​

​