VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/how-to-set-dropdown-and-search-box-in-same-line-using-bootstrap/

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

  • Courses
  • Tutorials
  • Interview Prep

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

Last Updated : 23 Jul, 2025

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.

Approach

  • The <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.

Output:

👁 topsearch
Output

Example 2: The example shows how to set dropdown and search box in same line using Bootstrap

Output:

👁 topsearch1
Output
Comment

Explore