In Bootstrap 4, you can use these utilities:
Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.
The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
Where property is one of:
m - for classes that set margin p - for classes that set padding
Where sides is one of:
t - for classes that set margin-top or padding-top b - for classes that set margin-bottom or padding-bottom l - for classes that set margin-left or padding-left r - for classes that set margin-right or padding-right x - for classes that set both *-left and *-right y - for classes that set both *-top and *-bottom blank - for classes that set a margin or padding on all 4 sides of the element
Where size is one of:
0 - for classes that eliminate the margin or padding by setting it to 0 1 - (by default) for classes that set the margin or padding to $spacer * .25 2 - (by default) for classes that set the margin or padding to $spacer * .5 3 - (by default) for classes that set the margin or padding to $spacer 4 - (by default) for classes that set the margin or padding to $spacer * 1.5 5 - (by default) for classes that set the margin or padding to $spacer * 3 auto - for classes that set the margin to auto
In essence I can set a margin right to an element, for instance, using mr-3
or mr-2
, depending on how much margin I want.
What is the equivalent of these spacing utilities in Ant Design?
The relation of vertical spacing Example of the different vertical distance. In Ant Design, the three different formats are 8px (small spacing), 16px (middle spacing) and 24px (large spacing).
You can use https://ant.design/components/space/ to put spaces between your buttons or any other elements.
Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options.
Bootstrap provides some handful helper classes, for faster mobile-friendly development. These can be used for showing and hiding content by device via media query, combined with large, small, and medium devices. Use these sparingly and avoid creating entirely different versions of the same site.
An alternative: https://www.npmjs.com/package/antd-css-utilities
import 'antd-css-utilities/utility.min.css';
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With