How to make bootstrap grid overlap - css

Question

I'm currently making a page that will display a list of customers, and will have a button to add new customers. I want the button to add new customers to be in line with the page-header, but keep the formatting (underline) that is currently already in place from the page-header.
This is what I want it to look like:
I tried this, but can't get them to overlap:
https://jsfiddle.net/2ys2zp8z/
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Customers</h1>
</div>
<div class="col-lg-2 col-lg-push-10 text-right">
<a class="btn btn-primary">New Customer</a>
</div>
</div>

Answer 1

You can either move the a tag to inside the h1 and give it the pull-right class like so
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css);
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Customers
<a class="btn btn-primary pull-right">New Customer</a>
</h1>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>Internet Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
</tbody>
</table>
</div>
</div>
or you can wrap the text in the h1 with a span and add pull-left to it while also adding text-right class to the h1.
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css);
<div class="row">
<div class="col-lg-12">
<h1 class="page-header text-right">
<span class="pull-left">Customers</span>
<a class="btn btn-primary">New Customer</a>
</h1>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>Internet Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 2

just change the class .col-lg-12 to .col-lg-10 and .col-lg-12 to .col-lg-2
something like that.
SEE DEMO
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<h1 class="page-header">Customers</h1>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<a class="btn btn-primary">New Customer</a>
</div>
</div>
OR
<div class="row">
<div class="col-lg-12">
<h1 class="page-header pull-left">Customers</h1>
<a class="btn btn-primary pull-right" style="padding-top: 15px;">New Customer</a>
</div>
</div>

Answer 3

Updated Fiddle see the working fiddle
<div class="row">
<div class="col-lg-12">
<h1 class="page-header" >Customers
<a class="btn btn-primary" style="float:right;margin-right:5px;">New Customer</a>
</h1>
</div>
</div>