Twitter Bootstrap Question posted in

Twitter bootstrap – How to overlap columns in Bootstrap 3?

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?

Tags:

3

Answers


  1. 0

    You need to place the new column under the same div as the one you want to overlap.

    Here is an example

    <style>
.first {
background-color: #dedef8;
border: solid black 1px;
}

.second {
 background-color: #dedef8;
 border: solid black 1px;
}
</style>

<body>
 <div class="container">
  <div class="row">
    <div class="col-xs-7 first">
        <p>This is the first column</p>

     <div class="col-xs-6 second">
        <p>This is the second </p>   
     </div>
    </div>          
  </div>
 </div>
</body>

    Here’s a jfiddle example: http://jsfiddle.net/NachoSupreme/o0fs78fv/

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search