Adding margins in Bootstrap on mobile screens only

When optimising your site for mobile, sometimes you need margins that only apply at certain screen sizes.

For example I have this on the desktop size of my website HorseRecords:

And on mobile it goes to this:

There is no enough space between the image and the title for my liking. So let’s add some space!

The code is:

    <div class="row mb-3 pb-3 border-bottom">
        <div class="col-md-6 ">
            <img src="{% static 'images/mobile_add_events.jpg' %}" class="img-fluid mb- mb-md-0" >
        </div>
        <div class="col-md-6 my-auto ">
            
            <h3 class="mb-3 mt-4 mt-md-0"><b>Add events on the go!</b></h2>
            <p>As you work with your horses, you can easily record what you've been up to.<br>
            <br>
            Adding an event is as simple as a couple of clicks then selecting the event from 
            a dropdown and tapping Add!<br>
            <br>Your Event is then safely stored on the Cloud.<br>
            <br>
            You can use our prepared list of events or create your own custom events - Easy!<br>
            <br>
            <a href="{% url 'website:pricing' %}" class="btn btn-primary no-underline">Try it for Free</a>
            </p>
        </div>        
    </div>

The trick is to add these bootstrap classes mt-4 mt-md-0 to add a margin to the header element only on mobile:

 <h3 class="mb-3 mt-4 mt-md-0"><b>Add events on the go!</b></h2>

And then you get the much nicer looking:

Lets look at mt-4 mt-md-0

The mt-4 means “give this element a margin top of 4”

The mt-md-0 means “give a margin of 0 to all screen sizes medium and above”

Leave a Reply