Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3 - Column top margin on smaller screens

I have a row with X possible columns.

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <!-- ... and so on ... -->
    </div>
</div>

Now I would like to add margin-top:20px to all small screen columns and the same margin for big screen columns, if there are more than 4 as that would cause two "rows" to be shown and would therefore require some space between.

Is that somehow possible with only the use of CSS?

like image 292
n00b Avatar asked Mar 30 '14 10:03

n00b


People also ask

How do I add a margin to a Bootstrap column?

You can use calculated width/margins., no change to your HTML necessary. E.g. the width of col-md-3 is 100/4=25%. Therefore you can reduce this, say to 20%, and allocate the remaing 5% to your margins.

How do you remove padding from Col MD?

row doesn't have the extra margins and padding that a col-md-12 would bring and also discounts the space that a column would introduce with negative left & right margins. if you really wanted to remove the padding/margins, add a class to filter out the margins/paddings for each child column.

How do you remove padding from a container?

If you want to remove the padding for all the screens then you can go to your theme module and set padding as 0px for the top, left, and right. If you want to do the same for a specific screen you add a new CSS class from Style editor of the screen.


2 Answers

You can use a media query for whenever you want the top margin..

@media (max-width: 767px) {
    .col-xs-6 {
        margin-top:20px;
    }
}

http://www.bootply.com/126007

P.S. - There is nothing wrong with having the total of .col-* in a .row exceeding 12 (ie: http://getbootstrap.com/css/#grid-example-mixed). It simply causes a wrap. There are several examples in the docs that use this technique. It's generally not ideal for nested rows.

like image 56
Zim Avatar answered Sep 17 '22 19:09

Zim


I needed something similar and following is the solution I came up with. Documenting it for future readers (and myself)

$res-list: (xs: (0px, 767px), sm: (768px, 991px), md: (992px, 1199px), lg: (1200px, 9999px));
$dir-list: (t: top, r: right, b: bottom, l: left);

@for $r from 1 through 10{
  @each $res-abbr, $res-vals in $res-list{
    @media (min-width: nth($res-vals, 1)) and (max-width: nth($res-vals, 2)) {
      @each $dir-abbr, $dir-name in $dir-list{
        $x: $r * 5;
        .m#{$dir-abbr}-#{$res-abbr}-#{$x}{
          margin-#{$dir-name}: #{$x}px;
        }
        .m#{$dir-abbr}-#{$res-abbr}-#{$r}p{
          margin-#{$dir-name}: #{$r}unquote('%');
        }
      }
    }
  }
}

This SASS code generates classes along the lines of following

@media (min-width: 0px) and (max-width: 767px) {
    .mt-xs-5 { margin-top: 5px; }
    .mt-xs-1p { margin-top: 1%; }
    .mr-xs-5 { margin-right: 5px; }
    .mr-xs-1p { margin-right: 1%; }
    .mb-xs-5 { margin-bottom: 5px; }
    .mb-xs-1p { margin-bottom: 1%; }
    .ml-xs-5 { margin-left: 5px; }
    .ml-xs-1p { margin-left: 1%; } 
}

So the content editor can use .mt-xs-10 to apply margin-top: 10px to given element on extra-small screen.

I hope it helps somebody.

like image 40
Ejaz Avatar answered Sep 19 '22 19:09

Ejaz