Romulus Romulus - 2 years ago 229
HTML Question

Making a bootstrap search bar with 2 inputs and one button, on a single line

I am trying to make a search bar using html/bootstrap/Jquery which looks similar to the search bar found here:

So far I have that design but with only one text box:

<link rel="stylesheet" href="">
<div class="container-fluid">
<div class="row">
<div class="col-sm-offset-3 col-md-6">
<form class="" action="next_page.php" method="GET">
<div class="form-group" id="search_wrapper">
<input type="text" id="search_field" class="form-control" name="search_title" placeholder="Search By Name">
<button type="submit" id="search_button" class="btn btn-default">Search</button>


#search_field {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-color: #CCCCCC;
outline: none;
#search_button {

border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
font-size: 17px;

When I add another input between the button and input between the input and button, the input just displays below both the button and the text box.

<input type="text" id="search_field" class="form-control" name="search_place" placeholder="Search By Place">


I made a jsfiddle

If that doesnt just link you to it, please let me know in a comment that it doesn't work. I have never used jsfiddle before.

Answer Source

I would recommend leveraging the Bootstrap native styles to the maximum extent possible, as they give you a robust set of tools to build your site.

For this particular issue, you're looking for Bootstrap's Inline Form styles.

Here's an example from their docs:

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="">
  <button type="submit" class="btn btn-default">Send invitation</button>

You also are looking for Bootstrap Input Groups which will allow you to "pair" the button to the right of the last input.

Note the following things about that code:
1. The form has a class of form-inline. This is important, as it tells Bootstrap to line things up inline.
2. Each pair of label / inputs gets wrapped in a div with the class form-group. This tells Bootstrap to display this "group" (label and input) inline.
3. Each input gets a class of form-control. This tells bootstrap to style it up as an input.

Now, applying those classes to your markup, to achieve what you want, would look something like this:

<!-- Add the class "form-inline" -->
Important:<br>form-inline does not appear correctly unless you make the preview pane wide!
<form class="form-inline" action="next_page.php" method="GET">
  <div class="form-group">
    <input type="text" id="search_field" class="form-control" name="search_title" placeholder="Search By Name">
    <!-- close the "form-group" div and start a new div -->
  <!-- here we use "input-group" to get the submit tight "against" the input -->
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search for...">
    <span class="input-group-btn">
<button type="submit" id="search_button" class="btn btn-default">Search</button>

Here's a Working Fiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download