Skip to content
Related Articles

Related Articles

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
  
    <link rel="stylesheet" href=
        integrity=
"sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
        crossorigin="anonymous">
  
    <!-- jQuery library -->
    <script src=
    </script>
  
    <script src=
    </script>
  
    <script src=
    </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>

chevron_right


Output:



Example 2:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
  
    <link rel="stylesheet" href=
        integrity=
"sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
        crossorigin="anonymous">
  
    <!-- jQuery library -->
    <script src=
    </script>
  
    <script src=
    </script>
  
    <script src=
    </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>

chevron_right


Output:


full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :