Can't get "mt-sm-4" to be working,

support
1

I’m trying to get a margin-top for my subtitle in the mobile view for the following code:

		<div class="col text-md-left mt-sm-4">
			<b>
				{{ $file.bold_content }}
			</b>
			<p>
				{{ $file.content }}
			</p>
			<a href="{{ $file.button_link }}">
				<button class="normal-button mb-5">{{ $file.button_text }}</button>
			</a>
		</div>
	</div>

Can anybody see my mistake?

2

That is not a hugo problem, but that said, you should make sure that class exists. Are you loading the css module that has it? I would poke around in the web developer console in your browser.

3

It mysteriously work after I let it sit like that and worked on other parts of my site. :thinking:
“Welcome to the world of IT” i guess :joy:

4

(Here to save the honour of IT:)

Nope. Not IT. You need to understand, that first of all .mt-sm-4 is a Bootstrap V4 class. Secondly: it works on block elements, not inline elements. The copypasted markup omits something before that opening <div> (there are two closing divs with one opening div). One of these missing things might have been floating or inline which made .mt-sm-4 APPEAR to not be working (apart from my weird feeling that a .col can’t have .mt-sm-4).

It’s always better to post the full template code. An in case that’s not possible try using an extra div for the class that seems to not be working - it might fix it “magically” by the power of IT.

2 Likes