How to overlap columns in Bootstrap 3?

Question

I'd like to create single row with two overlapping columns like that:

.row
  .col-sm-7
  .col-sm-6

so that 6th column of the grid is overlapped.

It's partially possible with a .col-sm-pull-1:

.row
  .col-sm-6
  .col-sm-6.col-sm-pull-1

but the 12th column becomes empty. I tried:

.row
  .col-sm-6
  .col-sm-7.col-sm-pull-1

but the second column moves to the next row.

I found the answer for Bootstrap 2 (How to overlap columns using twitter bootstrap?). Is it possible with the Bootstrap 3?

Answer 1

After seeing your image example, I think perhaps this is what you are looking for. (I made them overlap 2 columns because that will center it better)

.blue{
    background-color: rgba(0,0,255,0.5);;
}
.row .red{
    background-color: rgba(255,0,0,0.5);
    position: absolute;
}
.red, .blue {
    height: 70px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="red col-xs-7"></div>
        <div class="blue col-xs-7 col-xs-push-5"></div>
    </div>
</div>

Answer 2

Fiddle If you want to overlap the two columns in one row, you'll need negative margins. The bootstrap gutters/margins are layed out using positive and negative margins. I would recommend ids for the columns and then you can use z-index if you want one over the other one. So change right margin on first and left margin on the second.

margin-right: -5%; 
margin-left: -5%;

How the grid works is a great reference for how its built.