Bootstrap - Center align page header with floating buttons - html

Question

Behold the following image of a .page-header I currently have:
As you can see, I'd like to have the page header in the center and buttons aligned to the left and right.
This works because both buttons have the same size. Now, if I increase the size of the left button, look what happens:
You see? The header isn't aligned to the center anymore, it's pushed to the right by the left button. Which is undesirable in my case. I would like to have the header centered, no matter what the size of the buttons are. If the buttons are too big, it would be even okay if they overlap the header.
Here is a code sample and a jsfiddle:
<div class="container">
<div class="page-header">
<a class="btn btn-primary pull-left" role="button" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<a class="btn btn-success pull-right" role="button" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<h3 class="text-center">Header</h3>
</div>
<div class="alert alert-danger" role="alert">No results</div>
</div>

Answer 1

You just need to use positions to make them consistent with the size.
.page-header .pull-left {position: absolute; left: 15px;}
.page-header .pull-right {position: absolute; right: 15px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="page-header">
<a class="btn btn-primary pull-left" role="button" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<a class="btn btn-success pull-right" role="button" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<h3 class="text-center">Header</h3>
</div>
<div class="page-header">
<a class="btn btn-primary pull-left" role="button" href="#">
<span class="glyphicon glyphicon-plus"></span> text pushes to right
</a>
<a class="btn btn-success pull-right" role="button" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<h3 class="text-center">Header</h3>
</div>
<div class="alert alert-danger" role="alert">No results</div>
</div>
Preview
This is one way, but obviously, this has issues with sizing. When the width is very less, there might be overlaps.