Bootstrap - cannot allign Button with Text Box vertically - html

Question

Im pretty new to bootstrap, how can i allign my search button with the text box in my navbar? I've tried a couple of hours now without luck. This is how it looks like:
http://bildr.no/image/TDhPNWZZ.jpeg
And this is my code:
<div class="collapse navbar-collapse navbar-ex1-collapse">
<div class="col-sm-6 col-md-6">
<form class="navbar-form" role="search" method="get" id="search-form" name="search-form">
<div class="input-group">
#using (Html.BeginForm("Search", "Product", FormMethod.Get)) {
<div class="input-group">
#Html.TextBox("searchString", null, new { id = "txtSearch", #class = "form-control", placeholder = "Søk etter vare..." })
</div>
}
<div class="input-group-btn">
<button class="btn btn-success pull-left" type="submit"><span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</form>
</div>
EDIT: Rendered code:
<div class="container">
<div class="row">
<div class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="/">Alkohol Mekka</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<div class="col-sm-6 col-md-6">
<form class="navbar-form">
<div class="input-group">
<form action="/Product/Search" method="get">
<input class="form-control" id="txtSearch" name="searchString" placeholder="Søk etter vare..." type="text" value="" />
</form>
<div class="input-group-btn">
<button class="btn btn-success pull-left" type="submit"><span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</form>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Registrer
</li>
<li>Logg Inn
</li>
</ul>
</div>
</div>
</div>
</div>

Answer 1

You have an incorrect build of nested input-group class. So you have this:
<form class="navbar-form" role="search" method="get" id="search-form" name="search-form">
<div class="input-group">!-- it starts here -->
#using (Html.BeginForm("Search", "Product", FormMethod.Get)) {
<div class="input-group">
#Html.TextBox("searchString", null, new { id = "txtSearch", #class = "form-control", placeholder = "Søk etter vare..." })
</div>
}
<div class="input-group-btn">
<button class="btn btn-success pull-left" type="submit"><span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div><!-- and ends here -->
</form>
when you should have something like this:
<form class="navbar-form" role="search" method="get" id="search-form" name="search-form">
<div class="input-group">
#using (Html.BeginForm("Search", "Product", FormMethod.Get)) {
#Html.TextBox("searchString", null, new { id = "txtSearch", #class = "form-control", placeholder = "Søk etter vare..." })
}
<div class="input-group-btn">
<button class="btn btn-success pull-left" type="submit"><span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</form>
Basically, you need to remove one .input-group class, and have the whole form (included button) inside the outer input-group
EDIT: Since there's a chance your unrendered code has issues ( I really don't know) here's a Bootply to show you how it works with just default html markup