Andrej Andrej - 9 months ago 39
CSS Question

Vertically align left and right elements in Bootstrap

I use Bootstrap 3.3.7 and I wonder how to display:

  • Header element
    aligned to the left of the

  • button
    element aligned to the right of the

  • 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.

<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 class="pull-right">
<button class="btn btn-primary">Submit</button>
<div class="clearfix"></div>

Answer Source

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.