how to make form input in middle - html

Question

hello i use bootstrap 3 v3.36 have a project that have a navbar fixed top and slider and form search.
in slider area i want to put from search and 3 button like 2 dropdown and search button with display inline.
heres my code
<header>
<!-- NAVBAR-START -->
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">people <span class="sr-only">(current)</span></li>
<li>gallery</li>
<li>inspiration</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Jobs oportunity</li>
<li>hirring a chief?</li>
<li>login|signup</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- NAVBAR-END -->
<!-- SLIDER-START -->
<div id="slider">
<img src="http://placehold.it/350x150">
</div>
<!-- SLIDER=END -->
<!-- search-controller -->
<div class="position-relative">
<div class="search-controller">
<form role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown1
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown2
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
<!-- search-controller END-->
</header>
css
#slider img{
width: 100%;
}
.search-controller .form-control{
width: 60%;
margin: auto;
}
.search-controller{
position: absolute;
top: auto;
bottom: 15px;
left: 0;
right: 0;
z-index: 2000;
}
.position-relative{
position: relative;
}
but with my code the input search and the other button cant get aline even i use display:inline-block how to do this?and how to make it responsive even i minimize for mobile because when i minimize my button collapse suddenly cant colapse?
or you can check the result here
http://codepen.io/vicario/pen/graqPm
thanks

Answer 1

Is this what you're looking for? I put the form elements into a .container div, changed .dropdown and .search-controller .form-control to display:inline-block and removed the relative positioning from .search-controller .form-control. Also I added the form-inline class to the form:
#slider img {
width: 100%;
/*height: 50%;*/
}
.search-controller .form-control {
width: 60%;
display:inline-block;
}
.dropdown{
display:inline-block;
}
.search-controller {
position: absolute;
top: auto;
bottom: 15px;
left: 0;
right: 0;
z-index: 2000;
}
.position-relative {
position: relative;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
<!-- NAVBAR-START -->
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">people <span class="sr-only">(current)</span></li>
<li>gallery</li>
<li>inspiration</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Jobs oportunity</li>
<li>hirring a chief?</li>
<li>login|signup</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- NAVBAR-END -->
<!-- SLIDER-START -->
<div id="slider">
<img src="http://placehold.it/350x150">
</div>
<!-- SLIDER=END -->
<!-- search-controller -->
<div class="container">
<div class="position-relative">
<div class="search-controller">
<form role="search" class="inline-form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown1
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown2
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
<!-- search-controller END-->
</div>
</header>

Answer 2

#slider img{
width: 100%;
}
.search-controller .form-control{
width: 60%;
margin: auto;
}
.search-controller{
position: absolute;
top: auto;
bottom: 15px;
left: 0;
right: 0;
z-index: 2000;
}
.position-relative{
position: relative;
}
<!-- language: lang-html -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<header>
<!-- NAVBAR-START -->
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">people <span class="sr-only">(current)</span></li>
<li>gallery</li>
<li>inspiration</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Jobs oportunity</li>
<li>hirring a chief?</li>
<li>login|signup</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- NAVBAR-END -->
<!-- SLIDER-START -->
<div id="slider">
<img src="http://placehold.it/350x150">
</div>
<!-- SLIDER=END -->
<!-- search-controller -->
<div class="position-relative">
<div class="search-controller">
<form role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<div class="dropdown row"><div class="col-lg-4"></div><div class="col-lg-4">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown1
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div><div class="col-lg-4"></div></div>
<div class="dropdown row"><div class="col-lg-4"></div><div class="col-lg-4">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown2
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul></div><div class="col-lg-4"></div>
</div>
<div class="row"><div class="col-lg-4"></div><div class="col-lg-4">
<button type="submit" class="btn btn-lg btn-default">Submit</button></div> <div class="col-lg-4"></div></div>
</form>
</div>
</div>
<!-- search-controller END-->
</header>
<script src="//code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>