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

You can add margin and padding by using default React's style:

const divStyle = {
  marginLeft: '10px',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

Refrenced from here