Vertically align left and right elements in Bootstrap

Question

I use Bootstrap 3.3.7 and I wonder how to display:

Header element h1 aligned to the left of the page-header
button element aligned to the right of the page-header
Both elements being on the same baseline

Current code is pasted below and the working example is on JSFiddle. My question is similar to this question, but proposed solution does not work for me.

<body>
<div class="container">
  <div class="row">
    <div class="col-sm-12"> 
      <div class="page-header">
        <div class="pull-left">
          <h1>Hello World <small>Home Page</small></h1>
        </div>
        <div class="pull-right">
          <button class="btn btn-primary">Submit</button>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</div>
</body>

The problem is that the `h1` has `margin-top` but the button hasn't. Add it the same margin.. — Mosh Feu, Nov 06 '16 at 11:21

score 1 · Answer 1 · answered Nov 06 '16 at 11:26

1

Remove top margin from header element:

.page-header h1 {
    margin-top: 0;
}

answered Nov 06 '16 at 11:26

grandpalacko

31
3

score 1 · Accepted Answer · answered Nov 06 '16 at 11:28

Your problem is with the CSS, not the markup

The fiddle you provided works as expected, the reason why the elements don't seem to align properly is because bootstrap sets a default margin on h1 elements while it doesn't do so with buttons.

The easiest way to fix this is to add

h1 {
    margin: 0;
}

To your site's CSS.

Alternatively for similar output in a "bootstrappy" way, you can look into bootstrap navbars and branded bootstrap navbars.

Vertically align left and right elements in Bootstrap

2 Answers2

Your problem is with the CSS, not the markup