What does the `p-N` and its variants represent in Bootstrap v4?

Question

I find the naming in Bootstrap v4 less than intuitive.

I know they want to minimise the impact all the classes cluttering up the markup, but I just can't come to a reasonable conclusion. I can guess - but I can't find concrete answers.

• p-1, p-2, p-N: Flexbox related, but what does the p stand for?
• d-flex: Flexbox related, but what does the d stand for? Perhaps display?
• mr-auto - Elliots cousin? Guessing margin related - perhaps margin-right-auto but can't confirm in the docs.
• mt-auto - ?
• ml-auto - ?

Answer 1

They are the new spacing utility classes. I think they're very intuitive:

• p-* is for padding all sides.
• m-* is for margin all sides.
• pl-* is for padding left.
• mt-* is for margin top.
• mr-auto is for margin right auto.

Spacing Utils Demo

There are also display utilties.

d-block, d-flex, d-inline-block, d-none etc...