inline form in bootstrap3 - html

Question

I'm trying to have 2 input fields next to each other in a (bootstrap-css) col-md, but can't seem to get it right.
Here is what I have so far
https://jsfiddle.net/9hrx59bd/
It also doesn't help when I put both input fields in the same input group, by removing this:
...
</div>
<div class="input-group ">
How can I get them next to each other, and use the full width?

Answer 1

You need to make both input-groups a col-md-6, here is the result: link
<div class="row">
<form class="form-inline" id="searchform" action="" accept-charset="utf-8" method="post">
<div class="input-group col-md-6 col-sm-6 col-xs-6">
<input class=" form-control " placeholder="city" id="location" type="text" name="location">
</div>
<div class="input-group col-md-6 col-sm-6 col-xs-6">
<input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job">
<span class="input-group-btn">
<button class="btn btn-danger" type="submit">
<span class=" glyphicon glyphicon-search" ></span>
</button>
</span>
</div>
</form>
</div>
Edit
I made it work on smaller screens by adding col-sm-6 and col-xs-6 aswell

Answer 2

Bootstrap Inline Form
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<form id="searchform" action="" accept-charset="utf-8" method="post">
<div class="col-md-6">
<div class=" form-group">
<input class="form-control" placeholder="city" id="location" type="text" name="location">
</div>
</div>
<div class="col-md-6">
<div class="form-group input-group">
<input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job">
<span class="input-group-btn">
<button class="btn btn-danger" type="submit">
<span class=" glyphicon glyphicon-search" ></span>
</button>
</span>
</div>
</div>
</form>
</div>
</div>

Answer 3

I think you just want a form-control and an input-group.
<div class="row">
<div class="col-md-6">
<form class="form-inline" id="searchform" action="" accept-charset="utf-8" method="post">
<input class="form-control" placeholder="city" id="location" type="text" name="location">
<div class="input-group">
<input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job">
<span class="input-group-btn">
<button class="btn btn-danger" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</form>
</div>
</div>
Demo
EDIT: Another option is to use the grid columns, but remove the padding:
.pr-0{
padding-right:0;
}
.pl-0{
padding-left:0;
}
<form class="row" id="searchform" action="" accept-charset="utf-8" method="post">
<div class="col-xs-6 col-sm-3 pr-0">
<input class="form-control" placeholder="city" id="location" type="text" name="location">
</div>
<div class="col-xs-6 col-sm-3 pl-0">
<div class="input-group">
<input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job">
<span class="input-group-btn">
<button class="btn btn-danger" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</div>
</form>
See the 2nd item in the demo

Answer 4

Assuming you want the input next to each other, refer code:
Please view the results in full page view.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form action="" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Password">
</div>
</form>