Semantic markup in react-bootstrap

Question

I am new to React and I would like to start using it right away with the react-bootstrap library. Now I am not sure how to integrate semantic element such as header, section and so on and use the container, row and col component in the same time.

With pure Bootstrap, i could basically do something like :

<header class="container-fluid">
  <div class="row">
    <div class="col-sm-6">
    </div>
  </div>
</header>

and there I have my semantic element working as my bootstrap container.

Now using the react-bootstrap library, I guess I would do something like :

<Container className="main-header">
  <Row>
    <Col sm={6}>
      Some content here
    </Col>
  </Row>
</Container>

I did not look deeply into the abstraction but my guess is that those components will all become div elements.

So should I nest the whole thing into an extra semantic html element? or is there another conventional way to do it?

Answer 1

You're looking for the as property:

https://react-bootstrap.netlify.app/docs/getting-started/introduction#as-prop-api

So your code becomes:

<Container as="header" className="main-header">
  <Row>
    <Col sm={6}>
      Some content here
    </Col>
  </Row>
</Container>