Is it really necessary to use the components provided by react-bootstrap?

Viewed 233

I've tinkered with some React projects that utilize the react-bootstrap library, and I understand the normal way of writing up html is to do something similar to the following:

<Container>
  <Row className="mb-3">
    <Col md={6}>Hello</Col>
    <Col md={6}>There</Col
  </Row>
</Container>

I get that this looks pretty, but to me, it seems silly to use (and import) all these classes that essentially just output <div class="whatever">...</div>, especially because you still end up adding things like className="mb-3" to use utility classes. Is it considered heresy to just use react-bootstrap in the following manner?

<div className="container mb-3">
  <div className="row">
    <div className="col">Hello</div>
    <div className="col">There</div>
  </div>
</div>

I know that some elements, like Form.Control offer special functionality and should be used as components, but it strikes me as overly pedantic to import and use a whole component just to slap a single <div class="col"> on the page.

I apologize if this is a stupid question, but I've googled around and haven't found any answers.

1 Answers

No, unless...

  • You want to control the grid (column count, ordering, etc.) dynamically with your model (which you could do manually, but yuck)
  • You're using JavaScript features, because you're not loading the standard Bootstrap library file and they won't work

Presumably you're loading the standard Bootstrap CSS file, so anything that relies solely on that should work fine.

Related