CSS adding margin to all children
Sometime I want to add margin to all children in case that they get stacked on mobile devices. It would be nice if I have a utility CSS that does the job and can be applied to a parent element.
.children-mb-1 > * {
margin-bottom: 0.25rem !important;
}
.children-mb-2 > * {
margin-bottom: 0.5rem !important;
}
.children-mb-3 > * {
margin-bottom: 1rem !important;
}
.children-mb-4 > * {
margin-bottom: 1.5rem !important;
}
.children-mb-5 > * {
margin-bottom: 3rem !important;
}
I adopted values from Bootstrap because I like it.
That's it.