Spacing is very crucial in any UI. We always want to keep our
spacing consistent and clean. We also want to avoid
unnecessary spacing.
Bermuda gives the three options. We can use
margin,
padding or
gapping with Bermuda.
Spacing In Bermuda
| Classname | Spacing Value |
|---|---|
| sm | 0.5rem |
| md | 1rem |
| lg | 2rem |
| xl | 2.5rem |
| xxl | 4rem |
Now, you can use these spacing options in combination with
margin, padding or gap in order to achieve different spacing
options.
For example:
| Margin Classes | Margin Value |
|---|---|
| m-sm | margin: 0.5rem; |
| m-y-sm |
margin-top: 0.5rem; margin-bottom: 0.5rem; |
| m-x-sm |
margin-left: 0.5rem; margin-right: 0.5rem |
| m-t-sm | margin-top: 0.5rem; |
| m-b-sm | margin-bottom: 0.5rem; |
Note: The above table shows an example for only margin with value of 0.5rem that is 'sm' class. But you can always use other breakpoints also like 'md' , 'lg', 'xl' and 'xxl'.
That was for margin. But you can also use padding and gapping
just like margin.
Following table shows the padding and gapping classes.
| Class Name | CSS Property |
|---|---|
|
p-(spacing value) ex. p-sm |
padding padding: 0.5rem; |
| p-y-(spacing value) |
padding-top & padding-bottom |
| p-x-(spacing value) |
padding-left & padding-right |
| p-t-(spacing value) | padding-top |
| m-b-(spacing value) | padding-bottom |
|
gap-(spacing value) ex. gap-sm |
gap gap: 0.5rem; |
| gap-row-(spacing value) | row-gap |
| gap-col-(spacing value) | column-gap |
It's easy, isn't it?
Now, you are ready to use Bermuda spacing classes to make your
UI's spacing consistent throughout your design.