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.

Solution 1

First include bootstrap CSS in your src/index.js or App.js

import 'bootstrap/dist/css/bootstrap.min.css';

Then you can style your component by passing desired bootstrap CSS class name as className prop in React, for example:

import React from "react"
import Container from "react-bootstrap/Container";

function MyComponent() {
  return (
    <Container fluid className="p-0">
      <SomeOtherComponent />
    </Container>
  );
}

export default MyComponent

Above code will add p-0 CSS class to Container.

Reference

React - How do I add CSS classes to components?

React-Bootstrap - Stylesheets

Solution 2

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

Solution 3

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" 

Comments

[Alexey Nikonov]

yea, i did in that way as i added default bootstrap className='pb-5', my question was how to do it in react-bootstrap only

[Mr.D]

It depends on lib itself. Devs may haven't added that kind of features.