Spacing and Margin Utility in React-Bootstrap

Question

I am React Js beginner. Are there spacing and margin utility classes in React Bootstrap like we have in Bootstrap mt-4,p-5,mx-auto etc. I am going through the documentation of react-bootstrap, also searched on many platforms but couldn't find the right answer. Just want to know if they exist.

Answer 1

You can use Bootstrap, just add the class of Bootstrap to the component and it will work like normal. For example for component Header:

class Header extends React.Component {
 <div className='mt-5'> //margin-top 5px

 {..content here}
 </div>
}

Remember to add the Bootstrap to your project at index.html file

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

Answer 2

The space utility converts shorthand margin and padding props to margin and padding CSS declarations. The props are named using the format {property}{sides}.

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

For more information, you can visit: https://mui.com/system/spacing/