CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-designpositioning
ckuijjer
ckuijjer

Reputation: 13814

Vertical gap between Bootstrap columns

I'm trying to create a layout in Bootstrap that shows three blocks on a larger screen and two blocks on a smaller screen (the breakpoint occurs between sm and md).

wanted layout

<div class="row">
    <div class="container">
        <div class="col-xs-6 col-md-4">A - 50</div>
        <div class="col-xs-6 col-md-4">B - 100</div>
        <div class="col-xs-6 col-md-4">C - 75</div>
    </div>
</div>

See CodePen example

This however results in an unwanted vertical gap between block A and C.

unwanted layout

As I see it I have a few possible options to remove the vertical gap, but perhaps there is a better solution:

Upvotes: 9

Views: 3505

Answers (4)

Ruskin
Ruskin

Reputation: 6171

Imperfect untested solution at http://codepen.io/elliz/pen/fvpLl. Key points:

  • At small widths
    • break B out of flow
    • make container smaller

HTML

<div class="container">
<!-- note: sm -> container 50% -->
  <div class="row col-xs-6 col-md-12"> 
    <!-- note: sm -> div = 100% of container which is 50% -->
    <div class="col-xs-12 col-md-4 h50">A - 50</div>
    <div class="col-xs-12 col-md-4 h100">B - 100</div>
    <div class="col-xs-12 col-md-4 h75">C - 75</div>
  </div>
</div>

CSS Fragment

/* xs and sm */
@media ( max-width: 991px) { 
  .h100 {
    position: absolute !important; /* better to do with specificity, but quick ugly hack */
    margin-left:93%;
  }
}

Spacing is not perfect, but gives you a starting point for your experiments.

Note: this can be implemented using FlexBox and Grid (when it is ready) far easier - and the latest alpha version of Bootstrap does support flexbox.

Upvotes: 2

Felix A J
Felix A J

Reputation: 6470

I have created a fiddle with a wrapping div added with a fixed width. For 320 screen size, reduced the wrapper width and also changed float of the B div to float: right Fiddle here - http://jsfiddle.net/afelixj/2q785vp5/2/

enter image description here

Upvotes: 0

Edward Manda
Edward Manda

Reputation: 579

I found a clever way of doing this. Rearrange the order. Put C before B and then use push and pull to swap the order

<div class="row">
    <div class="container">
        <div class="col-xs-6 col-md-4">A - 50</div>
        <div class="col-xs-6 col-md-4 col-md-push-4 ">C - 75</div>
        <div class="col-xs-6 col- col-md-4 col-md-pull-4">B- 100</div>
    </div>
</div>

Upvotes: 0

Jacob McKay
Jacob McKay

Reputation: 2816

I realize you said you'd prefer a css only solution, but in my opinion what you are trying to accomplish is not what the bootstrap devs had in mind when they designed their grid system. I would use javascript to stick that sucker where you need it:

jQuery/html/css solution

I changed your columns to be containers (I called em buckets)

HTML

    <div class="row">
  <div class="container">
    <div id="leftBucket" class="col-xs-6 col-md-4">
      <div id="A" class="h50">A - 50</div>
    </div>
    <div id="middleBucket" class="col-xs-6 col-md-4">
      <div id="B" class="h100">B - 100</div>
    </div>
    <div id="rightBucket" class="hidden-sm col-md-4">
      <div id="C" class="h75">C - 75</div>
    </div>
  </div>
</div>

<div id="hiddenDiv"></div>

Then I "borrowed" an approach to watching for media queries from the link in the comment below

JS

// stolen from: http://www.fourfront.us/blog/jquery-window-width-and-media-queries
$(window).resize(function(){    
    if ($("#hiddenDiv").css("float") == "none" ){
    // small screen!
    $('#C').appendTo('#leftBucket');
    } else {
    //not a small screen :P
    $('#C').appendTo('#rightBucket');
  }
});

And added some rules for the hidden div (that I use to watch screen width) CSS

#hiddenDiv {float:left;}
@media only screen and (max-width: 992px){
    #hiddenDiv {float:none;}
}

ps. it's good to see people using hand drawn doodles to get their ideas across, that's how I like to break it down for people also :D

Upvotes: 0

Related Questions