How to set dropdown and search box in same line using Bootstrap ?
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= <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> |
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= <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> |
Output:
Please Login to comment...