Horizontal and Vertical alignment of a toolbar with Bootstrap elements - html

Question

I am trying to create a page header / tool bar. This in an existing theme and there is a DIV at the top where this will reside. The basic premise is on the left a H2 title then on the right a bunch of bootstrap elements (search form, bottons, dropdowns etc.
I have tried all kinds of block, inline-block vertical-align etc. I can get the H2 to pull left and the toolbar to pull right but the toolbar elements all pull up to the top of the container div. I just want a clean looking layout with all the elements aligned along their horizontal axis.
I think the pull-right may be part of the problem. That seems to pull the right div up to the top.
Here is a Bootply link: http://www.bootply.com/BPucyP8mpk
<div class"container">
<div id="left">
<h2 class="">Title</h2>
</div>
<div id="right">
<form class="form form-horizontal">
<input type="text" placeholder="search field" class="form-control">
<button type="submit" class="btn">search</button>
</form>
<button class="btn btn-default">Button</button>
<div class="btn-group">
<button class="btn">Left</button>
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
<div class="btn-group"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Choice1
</li>
<li>Choice2
</li>
<li>Choice3
</li>
<li class="divider"></li>
<li>Choice..
</li>
</ul>
</div>
</div>
</div>
UPDATE:
Here is the computed CSS that wraps the header I am trying to format:
border-bottom-width: 1px;
border-top-color: rgb(103, 106, 108);
border-top-style: none;
border-top-width: 0px;
box-sizing: border-box;
color: rgb(103, 106, 108);
display: block;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
height: 70px;
line-height: 18px;
margin-left: -15px;
margin-right: -15px;
padding-bottom: 12px;
padding-left: 20px;
padding-right: 20px;
padding-top: 0px;
width: 1318px;
This is from my custom theme I have installed. This is the computed CSS from this wrapper div:
<div class="row wrapper border-bottom white-bg page-heading">
</div>

Answer 1

UPD:
The most suitable method for this task is use Flexbox
Check it out: http://www.bootply.com/CtVmUbzrlr
<div class="row">
<div id="left" class="col-sm-3 col-md-5">
<h2 class="">Title</h2>
</div>
<div id="right" class="col-sm-9 col-md-7">
<form class="form form-horizontal">
<div class="input-group">
<input type="text" placeholder="search field" class="form-control">
<span type="submit" class="input-group-addon">search</span>
</div>
</form>
<button class="btn btn-default">Button</button>
<div class="btn-group">
<button class="btn">Left</button>
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
<div class="btn-group"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Choice1
</li>
<li>Choice2
</li>
<li>Choice3
</li>
<li class="divider"></li>
<li>Choice..
</li>
</ul>
</div>
</div>
</div>
.row{
border: 1px solid #000;
}
#right{
display: flex;
align-items: center;
height: 66px;
justify-content: flex-end;
}
.input-group{
width: 200px;
}

Answer 2

Check this out:
<div class="col-lg-4">
<h2 class="">Title</h2>
</div>
<div class="col-lg-8">
<div class="row">
<form class="form form-horizontal">
<div class="col-lg-8">
<input type="text" placeholder="search field" class="form-control">
</div>
<div class="col-lg-4">
<button type="submit" class="btn btn-block">search</button>
</div>
</form>
</div>
<div class="row">
<div class="col-lg-12">
<button class="btn btn-default">Button</button>
<div class="btn-group">
<button class="btn">Left</button>
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
<div class="btn-group"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Choice1
</li>
<li>Choice2
</li>
<li>Choice3
</li>
<li class="divider"></li>
<li>Choice..
</li>
</ul>
</div>
</div>
</div>
</div>
you can check bootply also : http://www.bootply.com/LmGjZM6fHH
You need to manage your layout with the col-md-*
This is just for the demo, you can arrange with you own way

Answer 3

What about utilizing the navbar component from bootstrap?
http://getbootstrap.com/components/#navbar
I think the example here pretty much sums up your needs.
Basically I've added classes navbar-btn to the buttons, and navbar-form to the form to get them to align properly. I added the class navbar-right to both the form and the group of buttons.
http://www.bootply.com/IySnkX2ioK
Edit: The navbar-default class was just added to outline the bounds of the navbar, not part of the solution.

Answer 4

First thing is that if you want to have your search box on left - place it first and then button group with dropdown. Second, don't place navbar-rigth inside another navbar-rigth. And the last thing - just wrap your right-side elements in one div and add to it a little padding
Updated link