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

Last Updated : 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> 