Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 - ?
like image 633
Chris Avatar asked Feb 10 '17 13:02

Chris


People also ask

What does P do in bootstrap?

p-* is for padding all sides. m-* is for margin all sides. pl-* is for padding left.

Which of the following components has been dropped in bootstrap 4 from Bootstrap 3?

img-responsive is used for creating the responsive images, while this feature has been changed in Bootstrap 4. In Bootstrap 3, dark or inverse tables are not supported, whereas they are supported in Bootstrap 4.

What does BD mean in bootstrap?

I think this is just a custom css class to highlight the examples, i.e., set background color and borders, on the documentation pages. .bd-highlight { background-color: rgba(86,61,124,0.15); border: 1px solid rgba(86,61,124,0.15); } bd = Bootstrap Documentation? Follow this answer to receive notifications.

Can you still use bootstrap 4?

Bootstrap Versions The main differences between Bootstrap 5 and Bootstrap 3 & 4, is that Bootstrap 5 has switched to JavaScript instead of jQuery. Note: Bootstrap 3 and Bootstrap 4 is still supported by the team for critical bugfixes and documentation changes, and it is perfectly safe to continue to use them.


1 Answers

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...

like image 199
Zim Avatar answered Oct 01 '22 15:10

Zim