How to set dropdown and search box in same line using Bootstrap? Last Updated : 24 Jun, 2024 Comments Improve Suggest changes Like Article Like Report 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 that you want to search. The main aim is to align the dropdown menu and search box in a straight line. ApproachThe <head> section includes meta tags for character encoding and viewport settings, linking to Bootstrap and Font Awesome CSS libraries for styling, and jQuery, Popper.js, and Bootstrap JavaScript libraries for functionality.The <nav> element initializes a dark-themed Bootstrap navigation bar containing the website title "Geeks For Geeks."Inside the navigation bar, an unordered list is used to align navigation items to the right.The first list item creates a dropdown menu labeled "Courses" with two items, "Live courses" and "Online courses," displayed when the dropdown is toggled.The second list item contains a text input field for search functionality, providing a placeholder text "Search..".Example 1: We will create a navigation bar and create a dropdown menu and a 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: OutputExample 2: The example shows how to set dropdown and search box in same line using Bootstrap 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: Output Comment More infoAdvertise with us Next Article How to make Dropdown using Angular UI Bootstrap ? S snigdha_yambadwar Follow Improve Article Tags : Bootstrap HTML-Misc Bootstrap-4 Bootstrap-Misc Bootstrap-Questions +1 More Similar Reads How to add dropdown search bar in Bootstrap? A dropdown search bar in Bootstrap combines a text input field with a dropdown menu, providing users with options to select from while allowing them to input custom search queries. It enhances user experience by offering both flexibility and convenience.Preview of final output: Let us have a look at 2 min read How to Add Headers inside the Dropdown Menu in Bootstrap ? Drop-down menus are a common element used in web development to provide users with a list of options. Adding headers inside a drop-down menu can improve its organization and usability. This means to add headers inside the dropdown menu, use the .dropdown-header class in Bootstrap. Table of Content U 3 min read How to Add Headers inside the Dropdown Menu in Bootstrap ? Bootstrap provides the ability to create headers within dropdown menus, which enhances the clarity and organization of your website's navigation. Headers serve as titles or categories that group related dropdown items together, making it easier for users to quickly locate what they are looking for a 2 min read How to make Dropdown using Angular UI Bootstrap ? In this article, we will see how to make Dropdown using Angular UI bootstrap. Angular UI Bootstrap is an Angular JS framework created by Angular UI developers for providing better UI which can be used easily. Syntax: <div uib-dropdown></div> Download AngularUI from the link: https://angu 2 min read How to use bootstrap-select for dropdown? Bootstrap Select is a form control that shows a collapsible list of different values that can be selected. This can be used for displaying forms or menus to the user.ApproachThere are only some style properties that can be applied to the <option> component. This is because this sort of compone 2 min read How to use bootstrap-select for dropdown? Bootstrap Select is a form control that shows a collapsible list of different values that can be selected. This can be used for displaying forms or menus to the user.ApproachThere are only some style properties that can be applied to the <option> component. This is because this sort of compone 2 min read Like