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

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

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 – ?

Solutions/Answers:

Solution 1:

They are the new spacing utility classes. I think they’re are 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..

Related:  Make bootstrap well semi transparent

References