How to make bootstrap grid overlap

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

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 2

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>

Answer 3

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>