what do css classes like my-2, my-lg-0, mr-sm-2 do in bootstrap 4?

Question

I have looked at other questions and the bootstrap documentation and cant seem to find out what these classes do to elements. Any help is appreciated! Im just trying to make my search bar be 1/4th the size on a large viewport, 1/3 the size on a medium viewport, and 100% the size on a small viewport!

Solution

Those are bootstrap spacing utilities classes :

mr-sm-2:

r - for classes that set margin-right or padding-right

my-2, my-lg-0:

y - for classes that set both *-top and *-bottom

the m

m - for classes that set margin

you can see the notation from boostrap spacing here

---

sm and lg are utilities classes that everyone who uses bootstrap are use to see it:

sm - small

lg - large