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

Writing code in comment? 
                                    Please use ide.geeksforgeeks.org, 
                                    generate link and share the link here.
                                
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to keep gap between columns using Bootstrap?
Tailwind CSS vs Bootstrap
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property