Horizontal and Vertical alignment of a toolbar with Bootstrap elements

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><a href="#" class="">Choice1</a>
      </li>
      <li><a href="#" class="">Choice2</a>
      </li>
      <li><a href="#" class="">Choice3</a>
      </li>
      <li class="divider"></li>
      <li><a href="#" class="">Choice..</a>


     </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><a href="#" class="">Choice1</a>
       </li>
       <li><a href="#" class="">Choice2</a>
       </li>
       <li><a href="#" class="">Choice3</a>
       </li>
       <li class="divider"></li>
       <li><a href="#" class="">Choice..</a>
       </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><a href="#" class="">Choice1</a>
        </li>
        <li><a href="#" class="">Choice2</a>
        </li>
        <li><a href="#" class="">Choice3</a>
        </li>
        <li class="divider"></li>
        <li><a href="#" class="">Choice..</a>
        </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