Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the antd equivalent of Bootstrap 4 spacing utilities?

Tags:

antd

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?

like image 216
Berry Avatar asked Apr 13 '18 04:04

Berry


People also ask

What is space in ANTD?

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

How do you add spaces in ANTD?

You can use https://ant.design/components/space/ to put spaces between your buttons or any other elements.

What are bootstrap utilities?

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.

What is bootstrap responsive utilities?

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.


1 Answers

An alternative: https://www.npmjs.com/package/antd-css-utilities

import 'antd-css-utilities/utility.min.css';
like image 81
Hendy Irawan Avatar answered Sep 26 '22 06:09

Hendy Irawan