The Porto theme provides a comprehensive set of CSS utility classes that allow you to quickly adjust spacing, padding, and border radius without writing custom CSS.
These extra classes follow a consistent naming convention and make it easy to apply precise styling directly from your page builder or shortcode options.
1. Margin Classes
Use the following classes to control the margin of elements. Each class applies a specific margin value (in pixels) to all sides, or to individual directions (left, right, top, bottom).
| Class | Description |
|---|---|
.m-xs
| Adds 5px margin to all sides |
.m-sm
| Adds 10px margin |
.m
| Adds 15px margin |
.m-md
| Adds 20px margin |
.m-lg
| Adds 30px margin |
.m-xl
| Adds 40px margin |
.m-xlg
| Adds 50px margin |
.m-xxl
| Adds 60px margin |
.m-n
| Removes all margin (0px) |
Directional Margin Classes
Add margins only to a specific side of the element:
- Left margin:
.m-l-none,.m-l-xs,.m-l-sm,.m-l,.m-l-md,.m-l-lg,.m-l-xl,.m-l-xlg,.m-l-xxl - Top margin:
.m-t-none,.m-t-xs,.m-t-sm,.m-t,.m-t-md,.m-t-lg,.m-t-xl,.m-t-xlg,.m-t-xxl - Right margin:
.m-r-none,.m-r-xs,.m-r-sm,.m-r,.m-r-md,.m-r-lg,.m-r-xl,.m-r-xlg,.m-r-xxl - Bottom margin:
.m-b-none,.m-b-xs,.m-b-sm,.m-b,.m-b-md,.m-b-lg,.m-b-xl,.m-b-xlg,.m-b-xxl
Negative Margin Classes
Negative margins can be used to pull elements closer together.
- Example:
.m-t-n-smadds -10px top margin.
Each directional margin also supports negative variations (e.g.,.m-l-n-sm,.m-b-n-md, etc.).
2. Padding Classes
Padding classes work similarly to margin classes and let you control inner spacing within an element.
| Class | Description |
|---|---|
.p-xs
| Adds 5px padding to all sides |
.p-sm
| Adds 10px padding |
.p
| Adds 15px padding |
.p-md
| Adds 20px padding |
.p-lg
| Adds 30px padding |
.p-xl
| Adds 40px padding |
.p-xlg
| Adds 50px padding |
.p-xxl
| Adds 60px padding |
.p-n
| Removes all padding (0px) |
Directional Padding Classes
- Left padding:
.p-l-none,.p-l-xs,.p-l-sm,.p-l,.p-l-md,.p-l-lg,.p-l-xl,.p-l-xlg,.p-l-xxl - Top padding:
.p-t-none,.p-t-xs,.p-t-sm,.p-t,.p-t-md,.p-t-lg,.p-t-xl,.p-t-xlg,.p-t-xxl - Right padding:
.p-r-none,.p-r-xs,.p-r-sm,.p-r,.p-r-md,.p-r-lg,.p-r-xl,.p-r-xlg,.p-r-xxl - Bottom padding:
.p-b-none,.p-b-xs,.p-b-sm,.p-b,.p-b-md,.p-b-lg,.p-b-xl,.p-b-xlg,.p-b-xxl
3. Border Radius Classes
Use these classes to apply consistent rounding to elements.
| Class | Description |
|---|---|
.br-none
| Removes border radius (0px) |
.br-normal
| Applies a standard 5px radius |
.br-thick
| Applies a 7px radius for a more rounded appearance |
4. Bootstrap Utility Integration
In addition to Porto’s built-in spacing classes, the theme fully supports Bootstrap’s responsive utility classes.
You can use these to modify margin (
m-
) and padding (
p-
) responsively across different screen sizes.
For more details, refer to the official Bootstrap Spacing Documentation.
