Bootstrap 3 - Column top margin on smaller screens

Question

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?

First of all, you can't have any number of columns in one row, as you wish. Sum of all column classes in one row must be twelve. http://getbootstrap.com/css/#grid-example-basic — Miljan Puzović, Mar 30 '14 at 10:57
Not true @MiljanPuzović, the columns simply begin a new line once they run out of space. Otherwise how would a row full of `col-xs-12` work? — slynagh, Mar 30 '14 at 11:10
http://getbootstrap.com/css/#grid-example-basic Every row have the sum of twelve cols. Show me just one example in official docs where sum is greater of twelve in case of twelve grid system. — Miljan Puzović, Mar 30 '14 at 11:20
Wrong link :http://getbootstrap.com/css/#grid-example-mixed. — slynagh, Mar 30 '14 at 11:23
Ok, now look above and tell me where is .container-fluid class. — Miljan Puzović, Mar 30 '14 at 11:24
No, to your previous question, I posted the wrong link. Check the markup and count the numbers. If you are coding a fully responsive ie. making full use of all the breakpoints in bootrap's css, all column numbers below large size will add up to more than twelve. In such a case, columns will simply start a new line. As designed. — slynagh, Mar 30 '14 at 11:30

score 33 · Accepted Answer · edited Dec 01 '15 at 07:31

33

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.

edited Dec 01 '15 at 07:31

Anders Lindén

6,839
11
56
109

answered Mar 30 '14 at 15:08

Carol Skelly

351,302
90
710
624

1

Shouldn't the media query be "max-width: 767px", since Bootstrap 3's .col-sm applies to "≥768px"? – Marcos Pereira Aug 01 '15 at 22:55
1

Am I the only one who thinks that there should be a better solution (a margin class http://stackoverflow.com/a/20096216/2219831 ) probably. In order to add vertical space between items, the **content editor** will have to edit CSS. Also there could be a scenario where not all stacked elements would need vertical spacing. – Ejaz Aug 09 '16 at 13:29
Ya, the margin class would work too, and there is something like this in the upcoming Bootstrap 4. However, the margin class does'nt work for a specific grid tier/breakpoint like this solution. Generally content is contained within another element (ie:
) which would also provide spacing.
– Carol Skelly Aug 09 '16 at 14:20

score 7 · Answer 2 · answered Aug 09 '16 at 15:35

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.

You should be congratulated for massively over-complicating a simple task. — Relaxing In Cyprus, Sep 26 '17 at 10:21
I would not think it as being over-complicated but being empowering to the content editors. Think about the usage of resulting CSS rules. — Ejaz, May 08 '18 at 14:59
Interesting ressource, for small projects it is overcomplicating thinks but for larger ones(repeated simple tasks) it is smarter and more simple. — Aness, Sep 19 '19 at 09:38

score 3 · Answer 3 · answered Nov 06 '17 at 13:31

This is an old post but below is a clean solution.

[class*="col-"] {
  margin-bottom: 15px;
}

This works well for some situations but it adds extra, unnecessary margin when it's not needed. To solve this, we can create a new css class that applies top margin to columns when they get stacked. I create a class named .row-grid

.row.row-grid [class*="col-"] + [class*="col-"] {
  margin-top: 15px;
}

@media (min-width: 1200px) {
  .row.row-grid [class*="col-lg-"] + [class*="col-lg-"] {
    margin-top: 0;
  }
}
@media (min-width: 992px) {
  .row.row-grid [class*="col-md-"] + [class*="col-md-"] {
    margin-top: 0;
  }
}
@media (min-width: 768px) {
  .row.row-grid [class*="col-sm-"] + [class*="col-sm-"] {
    margin-top: 0;
  }
}

score 1 · Answer 4 · answered Nov 04 '18 at 11:19

1

I use this simple and clean solution:

.row { margin-top: -15px; }
.row > div { margin-top: 15px; }

In that manner, every <div class='col-*-*'> has 15px margin on top, except those on the first row (or, on mobile, except the one on the top).

answered Nov 04 '18 at 11:19

Marco Panichi

1,068
1
18
31

score 1 · Answer 5 · answered Mar 29 '19 at 17:10

This simple solution automatically applies a top margin to all columns except the first, at extra small screen sizes. No special class names or other modifications to HTML or CSS are necessary. (Change the margin-top value below to whatever you prefer.)

@media (max-width: 767px) {
  [class*="col-"]:not(:first-child) {
    margin-top: 30px;
  }
}

Bootstrap 3 - Column top margin on smaller screens

5 Answers5