n00b n00b - 3 months ago 24
CSS Question

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?

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.

Comments