<div class="container my-4">

  <p>

    <strong

            >Bootstrap filter functionality enables your users to select images, products, cards, and other data that meet their requirements.</strong

      >

  </p>

  <p>Search with dropdown works in a similar way.</a>

​

  <hr />

​

  <p class="font-weight-bold">Basic examples</p>

​

  <p>

    You will <strong>find the code structure for this example in the tabs on the left</strong>. For even <strong>more examples, resources & customization options</strong> click the red <button class="btn btn-danger btn-sm">DOCS</button> button in the upper left corner. 

  </p>

​

    <!-- Copy this code to have a working example -->

    <section class="border p-4 mb-4 d-flex align-items-center flex-column">

      <!-- 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-mdb-toggle="collapse"

                  data-mdb-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 me-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-mdb-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 -->

            <div class="input-group pl-5">

              <div id="navbar-search-autocomplete" class="form-outline">

                <input type="search" id="form1" class="form-control" />

                <label class="form-label" for="form1">Search</label>

              </div>

              <button type="button" class="btn btn-primary">

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

              </button>

            </div>

          </div>

          <!-- Collapsible wrapper -->

        </div>

        <!-- Container wrapper -->

      </nav>

      <!-- Navbar -->

    </section>

    <!--/ Copy this code to have a working example -->

</div>