Spacing and Margin Utility in React-Bootstrap

reactjs react-bootstrap
pooja picture pooja · Dec 13, 2018 · Viewed 21.9k times · Source

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

Tony Bui picture Tony Bui · Dec 13, 2018

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">

Related questions

How to add a classname/id to React-Bootstrap Component?

Suppose we are using Row from React-Bootstrap... How do we style it without using a wrapper or inner element: <Row> <div className='some-style'> ... </Row> Ideally we could just do: <Row className='some-style> ... &…

Read More
Listen to keypress for document in reactjs

I want to bind to close the active react bootstrap popover on escape press .Here is the code _handleEscKey:function(event){ console.log(event); if(event.keyCode == 27){ this.state.activePopover.hide(); } }, componentWillMount:function(){ BannerDataStore.addChangeListener(this._onchange); document.addEventListener("click", …

Read More
Changing style of a button on click

Is it possible to change background-color of my button onClick function? ex. click background-color: black, another click background-color: white I've tried something like this.style, no result. I've managed to get overlay working and insert needed data inside of it. …

Read More