Romulus Romulus - 6 months ago 111
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:

https://us.letgo.com/en

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

<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<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>


css

#search_field {
background-transparent;
height:40px;
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;
position:absolute;
top:0;
right:0;
font-size: 17px;
width:120px;
height:40px;
}
#search_wrapper{
height:40px;
position:relative;
}


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">


EDIT 1

I made a jsfiddle

https://jsfiddle.net/7v6hc9sz/1/

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

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>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

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" -->
<h3>
Important:<br>form-inline does not appear correctly unless you make the preview pane wide!
</h3>
<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 -->
  </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>
      </span>
  </div>
</form>

Here's a Working Fiddle

Comments