Does Bootstrap include predefined classes like pad-10 or mar-left-10, or do I need to create custom classes for padding and margins?
For example, similar to the options shown under the padding and margin tabs.
Bootstrap actually doesn’t use classes like pad-10 or mar-left-10 directly.
Instead, it provides a set of very flexible utility classes for spacing, like p-1 through p-5 for padding and m-1 through m-5 for margins.
For example, pl-3 adds left padding, and ml-4 adds left margin.
These classes are based on a spacing scale, so you don’t get to specify exact pixel values but predefined increments. It’s super convenient once you get used to it!
I had the same question when I first started using Bootstrap margins classes and padding utilities.
The framework doesn’t have pixel-specific classes like pad-10. Instead, it uses a scale from 0 to 5, where each number corresponds to a multiple of the base spacing unit (usually 4px).
So, you use classes like m-2 or p-4 to add margin or padding. If you need very specific spacing that Bootstrap doesn’t cover, you’d have to write custom CSS.
Agree with the others!
Bootstrap margins classes are really about convenience with a consistent spacing system, not pixel-perfect control.
You’ll find classes like m-auto for automatic margin, or directional ones like mt-3 (margin-top) and px-2 (horizontal padding).
This keeps your design consistent and responsive.
For unique sizes outside their scale, custom classes or inline styles are the way to go.