How to set dropdown and search box in same line using Bootstrap ? - GeeksforGeeks

21 Dec, 2020
A dropdown menu is a type of menu, by using the dropdown menu user can select something from the given predefined set. It is a toggleable menu, which means it appears when the user clicks on the menu. A search box is a type of box in which you can write the string which you want to search.
The main aim is to align the dropdown menu and search box in a straight line.
Example 1: We will create a navigation bar and create a dropdown menu and search box, which will initially not appear in a straight line. We can use the unordered list “ul” of HTML structure which is in the form of a list.
HTML
<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <meta name="viewport" content=        "width=device-width, initial-scale=1">      <!-- Bootstrap CSS library -->    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"        integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"        crossorigin="anonymous">      <!-- jQuery library -->    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">    </script>      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">    </script>      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">    </script></head>  <body>      <!-- Navigation Bar -->    <nav class="navbar navbar-expand-sm         bg-dark navbar-dark">                  <h5 class="navbar-brand">Geeks For Geeks</h5>                  <ul class="navbar nav ml-auto">            <!-- Dropdown list -->            <li class="nav-item dropdown">                <a class="nav-link dropdown-toggle"                     data-toggle="dropdown" href="#"                     role="button" aria-haspopup="true"                    aria-expanded="false"                     style="color:white;">                    Courses                </a>                  <div class="dropdown-menu">                    <a class="dropdown-item"                         href="#">Live courses                    </a>                                          <a class="dropdown-item"                         href="#">Online courses                    </a>                </div>            </li>            <li>                <!-- Search Box -->                <input type="text" placeholder="Search..">            </li>        </ul>    </nav></body>  </html>
Output:
Example 2:
HTML
<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <meta name="viewport" content=        "width=device-width, initial-scale=1">      <!-- Bootstrap CSS library -->    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">      <link rel="stylesheet" href=        "https://use.fontawesome.com/releases/v5.6.3/css/all.css"        integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"        crossorigin="anonymous">      <!-- jQuery library -->    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">    </script>      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">    </script>      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">    </script></head>  <body>    <h2 align="Center" style="color:green;">        Dropdown menu and search box         without navigation bar    </h2>      <ul class="navbar nav ml-auto"         style="color:white;background-color:green">        <!-- Dropdown list -->        <li>            <a class="nav-link dropdown-toggle"                 data-toggle="dropdown" href="#"                 role="button" aria-haspopup="true"                aria-expanded="false"                 style="color:white;">                Courses            </a>              <div class="dropdown-menu">                <a class="dropdown-item"                     href="#">Live courses                </a>                                  <a class="dropdown-item"                     href="#">Online courses                </a>            </div>          <!-- Search Box -->        <li>            <input class="form-control                 form-control-sm mr-3 w-75"                 type="text" placeholder="Search"                 aria-label="Search">        </li>        </li>    </ul></body>  </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bootstrap-4
Bootstrap-Misc
HTML-Misc
Picked
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
Tailwind CSS vs Bootstrap
How to keep gap between columns using Bootstrap?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?