Add margin-bottom to all column elements - css

Question

In a bootstrap 3 project i've wanted some borders around cols so I made the following css Fiddle.
.admin-div{
background-color: #fff;
border-radius: 7px;
border: 1px solid #ccc;
padding:20px;
}
When I use it I place it inside a col like:
<div class="col-md-6 col-sm-8">
<div class="admin-div">
</div>
</div>
This works fine on big screens but on small screens there is no margin (note: the most left doesnt have the custom admin-div class and is a default list-group).
Large screen (nice margins beteween col's)
Small screen (no margin between col's)
One options is add
margin-bottom:20px
to all sm and sx elements but that sounds a bit overkill.
I could use
#media (max-width: 970px) { .spacing-div{ margin-bottom: 20px; } }
But than I have to add an extra class to all divs where I have a col.
So i have two solutions but they both feel like they could be replaced by something much more easy.
What is the best way to make
all col's have a margin-bottom :20px; even on small screens?
The extra admin-div is only to show the problem, without the extra div I would still have the problem but it wouldnt be visible that much.

Answer 1

If you want a margin on absolutely every column in Bootstrap you could use the following CSS selector which will add a margin to every element that contains col-.
[class*=col-] {
margin-bottom: 20px;
}
You could also use [class^=col-] in which the first class on an element needs to began with col-.
To extend this a bit further you could use a media query to have it only apply up to a certain screen size.
[class*=col-] {
margin-bottom: 20px;
}
#media ( min-width: 500px ) {
[class*=col-] {
margin-bottom: 0;
}
}
If you didn't want a margin on every single column then I would scope the above with a modifier selector.
<div class="row modifier">
<div class="col-6-md"></div>
<div class="col-6-md"></div>
</div>
/* fairly general - all columns in .modifier */
.modifier [class*=col-] {
margin-bottom: 20px;
}
/* a little more specific - only .col-md-6 columns in .modifier */
.modifier [class*=col-md-6] {
margin-bottom: 20px;
}