Bootstrap 3 - Column top margin on smaller screens

Question

I have a row with X possible columns. ```

content

``` 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?

Accepted Answer

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.

Bootstrap 3 - Column top margin on smaller screens

Solution

Problem

Related problems