Bootstrap class for left margin only

Hi all,

I am currently getting used to all the bootstrap classes. One that I cant seem to figure is left margin, so I know I can do mt-3 etc for top margin, mx-3 for left and right margin but what is the class for left margin only please?

Thanks John

I didn’t find one either so I made my own. Just follow the same setup as what it shows in the Styles window and apply it for left side :slight_smile:

ms for start so ms-3 would be left. me for end so me-3 for right.

Bootstrap recently changed these. They used to be ml (left) and mr (right) but for the new option of RTL available for website with word flow from right to left they thought it more logical to use start and end.

RTL in the future

1 Like

Ah thanks @twinstream I forget that they changed those names. Sure wish code of whatever type would stop changing the names once we get used to something lol.

1 Like

Thank you, that never occured to me. I think its more logical to keep it as ml / mr… :slight_smile:

From your mouth to god’s ears! What I really hate is that right now my sites are roughly split about 80%/20% between Bootstrap 4.x and 5.x, so when I bounce back and forth from doing edits to 4.x sites and new builds, I have to keep reminding myself, “duh, you’re in 5.x, you have to use ms (margin start), not ml (margin left).”

IMO this was an illogical decision on their part. They’ve created a disparity between CSS and the their utility classes. CSS still uses text-align: left and text-align: right , float: left float: right and margin and padding are still expressed as top, right, bottom, left. AFAIK, start and end are pretty much limited to flexbox.

1 Like

image
Is this the only way to add the utility classes or is there something else I’m missing?

Yes, that is the only way to add utility classes to BSS Components.

EDIT: My bad… I forgot about the margin/padding icon. It’s a fairly recent addition to BSS which I haven’t grown accustomed to using. You can add margin and padding utility classes by clicking the Resize Margin/Padding icon, selecting utility class from the drop down, and then use the mouse to drag the margin/padding to what you want. Personally, I find it quicker to just type the classes into the Attribute panel (especially if you want to add the same classes to multiple component.)

1 Like

You can add the margin/padding utility classes from the Stage, too. You can read more about it here.

You can also check it out in action here (in the Component Resizing chapter):

2 Likes