Bootstrap "type alignment" in react-bootstrap

Question

I am migrating a web app built with Bootstrap to React and react-bootstrap, both of which are awesome. The one thing I don't see in react-bootstrap is how to smoothly integrate Bootstrap's type alignment classes such as text-center. My app is wrapped in

<div class="container-fluid text-center">

I see two ways around this, but I am wondering if there is a recommended way around this that is not such a hack.

a. Replace my <Grid> JSX tag with <Grid bsClass="text-center container">. This seems to work fine, but I see in the react-bootstrap docs that "Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component." I can even add the fluid prop to Grid and it changes container to container-fluid without breaking.

b. Wrap everything in <div className="text-center">. One of the things I love about react-bootstrap is the clean code without a zillion extra <div>s, so this is inelegant.

As I say, just wondering whether there is an existing way to do this. It would be great to have some comment on this in the react-bootstrap docs, since it is a section of the Bootstrap docs that doesn't seem to be mentioned at all.

Thanks!

Answer 1

I would add the class manually with <Grid className="text-center" >, especially considering you mentioned this is a single element wrapping your app rather than an element that will be reused in different situations.