Andrej Andrej - 26 days ago 10
CSS Question

Vertically align left and right elements in Bootstrap

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>

Answer

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.

Comments