CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
gkn
gkn

Reputation: 13

How do you overlap columns in bootstrap3 on the same row?

I'm trying to achieve this effect in bootstrap 3: https://i.sstatic.net/BZRRC.png

Bootstrap uses 12 columns by default. If all column-widths in the current row adds up to more than 12, the overflowing column(s) ends up beneath on the "next row".

The divs look like this at the moment:

<div class="row">
  <div class="col-md-4">
     ...[left window]
  </div>
  <div class="col-md-6 col-md-pull-1">
     ...[middle, bigger window]
  </div>
  <div class="col-md-4 col-md-pull-2">
     ...[right window]
  </div>
</div>

This is 14 columns. The middle window correctly overlaps the left one. But the right window ends up below the left one, but two columns to the left.

Is there any way to prevent this behaviour and keeping all col-md-* on the same line, even though there are more than 12 (14 in this case)?

Upvotes: 1

Views: 389

Answers (2)

HenrikP
HenrikP

Reputation: 894

Pretty sure there is no way to get more than 12 columns/spans in one row. You can however create rows inside the columns to get access to even more columns like:

<div class="row">
  <div class="col-md-6">
     <div class="row">
          //12 columns here
     </div>
  </div>
  <div class="col-md-6">
     <div class="row">
          //12 columns here
     </div>
  </div>
</div>

This way they are still in "one" row. Uncertain whether it will work or not with your effect though.

Upvotes: 1

Elton Mesquita
Elton Mesquita

Reputation: 187

You can't do it out of the box with bootstrap as far as I know. Instead, use a class in the last column and add a negative margin.

Here an example with your HTML and bootstrap3: http://cdpn.io/bAKfj

Upvotes: 0

Related Questions