How to Add Negative Margin Using Bootstrap on Desktop Only

user_1744104 0
Viewed 3862

I'm using the Bootstrap utility class "mb-n15" to add some negative margin to an image so that it falls below the container:

<div class="container-fluid">
    <div class="row align-items-center">
        <div class="col-12 col-md-5 col-lg-5 order-md-1">

            <div class="w-md-150 w-lg-130 position-relative">

                <!-- Image -->
                <div class="mb-n15">

                    <!-- Image -->
                    <img src="myimage.jpg" class="img-fluid">

                </div>

            </div>

        </div>
    </div>
</div>

It looks great on desktop. However, on mobile, it overlaps some text below the image, making it unreadable.

How can I trigger the "mb-n15" class on "col-md-5" or "col-lg-5" (and above, not col-12) sizes only? The idea is to run the "mb-n15" class using a "Bootstrap Way," without needing to manually write CSS media queries. Is that possible?

bootstrap-4 twitter-bootstrap
1 Answers

The is no mb-n15 class. There are negative margins classes for 0 - 5 units that can be set responsively.

So for example, if you want to set a margin of negative 5 spacing units on md and larger, and no negative margin on xs/sm (mobile) it would be:

     <div class="m-md-n5 m-0">
           <img src="//placehold.it/800x500" class="img-fluid">
     </div>

https://codeply.com/p/bRAStkuS0U

user_1714560
Related