Search code examples
htmlcssbootstrap-4spacing

Bootstrap Spacing what is md?

enter image description here

In the div tag above picture, what does md means ?

  1. mx-auto: margin on the x-axis set to auto in other words, center the element horizontally.

  2. ml-md-0: Set margin left to 0 ?

  3. mr-md-auto: Set margin right to auto ?

If 1,2,3 are correct, then aren't above classes not only redundant but also contradict one another ?

From the 1. element margin is set to auto, but then in 2. element margin set to 0 again.

Can someone explain what those three bootstrap classes are doing please ?

Solution

  • Bootstrap is mobile-first, meaning whatever you define at smaller breakpoints will cascade up to larger breakpoints until overridden, so:

    • mx-auto: Center horizontally for mobile devices and up (aka all devices)
    • ml-md-0: Apply ml-0 only for md devices and up (mobile and sm devices will still have mx-auto)
    • mr-md-auto: Apply mr-auto only for md devices and up (mobile and sm devices will still have mx-auto)

    Note that the listed order of class strings doesn't matter, so for example mr-md-auto ml-md-0 mx-auto would have the same effect. Bootstrap will apply its styles in mobile-first order.