Apply bottom margins in Bootstrap 4 ONLY in xs (smartphone and iphone)

Question

Getbootstrap.com instructs, for putting CSS margin-bottom:4rem; on, say, images

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.​

The problem is that using the xs format, {property}{sides}-{size}, which would be mb-4, will apply the same margin-bottom spacing to sm, md, lg, and xl as well.

Does anyone know a trick to apply the margin-bottom spacing in Bootstrap to xs and only xs screens? What I am looking for is something like an "if statement" in Bootstrap.

Answer 1

Since the classes apply their styles in increasing screen size and CSS is cascading you can use the second class to override the first one. In your example that could be:

<div class="mb-4 mb-sm-0"></div> 

which overrides the first class, when the second one activates.

.mb-4 {   margin-bottom: 1.5rem !important; }  @media (min-width: 576px) {   .mb-sm-0 {     margin-bottom: 0 !important;   } }

<div class="mb-4 mb-sm-0"></div>