Is it possible to add more than mt-5 to my top margin?

Question

I would like to align some elements on my website, I've already used mt-5 in my HTML, but I need a little more margin. How can I do this?

Answer 1

There is no higher value in Bootstrap but you could make your own classes. The documentation says "You can add more sizes by adding entries to the $spacers Sass map variable.", but if you don't want to recompile the SASS you can make you own class like this:

.mt-6 {
    margin-top: 4rem; // or the value you want
}

The Bootstrap classes already use rem for the margin classes so it is better to stay with the same unit. The existing classes use these values (it could help you decide what you want to use for your value):

• .mt-5 is set to 3rem so this is 1rem unit higher.
• .mt-4 is 1.5rem (so you might want to use 1.5rem higher for your class)
• .mt-3 is 1rem
• .mt-2 is 0.5rem
• .mt-1 is 0.25rem

If you use it consistently on the top of all elements in the row, it will not affect the responsiveness. But if you use it left or right also, then it can affect responsiveness because it affects the width.

Answer 2

You can add your own style like this:

<div style="margin-top: 100px;"></div>