How to pass padding/margin as props in React-Bootstrap components

Question

I am trying to apply margins and paddings with React-Bootstrap as props.

I passed the docs through but haven't found any mention adding padding or margin in there as it is in official bootstrap docs (3th and 4th). I know it doesn't support well Bootstrap 4, so tried with both.

I tried to pass params as p={1}, paddingxs={5} or mt='1' but it doesn't recognize any of them. More over tried to find any Spacing element in React-Bootstrap folder, but failed.

Paddings and margins work as classnames. But I feel there must be a way to it without Bootstrap classes. There must be a kind of property.

Answer 1

The answer is: there is no props from React Bootstrap to use margins/paddings.

You can use props for col class, but no for margins.

Example:

<Col className="col-6 col-md-3 mb-3 pt-2">
// there you have a Col component from React-Bootstrap 4
// it has some grid system classes, that you can use as props like this:

https://react-bootstrap.github.io/layout/grid/

<Col xs={6} md={3} className="mb-3 pt-2">
// but as you can see, the native classes of Bootstrap 4 like
// mt, mb, pt, pb etc, they have not a props use with
// React-Bootstrap, you have to use them like regular classes
// inside "className"