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

reactjs jsx react-bootstrap
Arman picture Arman · Jul 20, 2016 · Viewed 102.8k times · Source

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> 
  ...
</Row>

But this doesn't work and I'd presume it's because React-Bootstrap does not know where the className goes within the Row component (it should just style the div that has the row's styles I think)

Answer

Igorsvee picture Igorsvee · Jul 20, 2016

If you look at the code for the component you can see that it uses the className prop passed to it to combine with the row class to get the resulting set of classes (<Row className="aaa bbb"... works).Also, if you provide the id prop like <Row id="444" ... it will actually set the id attribute for the element.

Related questions

React inline conditional component attribute

I've been searching everywhere and can't find an answer to my question. So I want a conditional attribute which is only displayed on certain conditions, example: <Button {this.state.view === 'default' && 'active'}></Button> As …

Read More
react-bootstrap Form component

I have tried several times to use the <Form> and <FormControl> components. Everytime I use I keep getting same erros: "warning.js?8a56:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It …

Read More
Render HTML string as real HTML in a React component

Here's what I tried and how it goes wrong. This works: <div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> This doesn't: <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> The description property is just …

Read More