How to replace container class in react-bootstrap

Viewed 15451

I've installed react-bootstrap, and have proven I can use the grid components which is my primary need. But why is "Container" not found, and how should I wrap my outermost content so that my page has margins and whatever else is normally set by bootstrap?

I understand that I can use regular CSS, but (a) wouldn't a Container be cleaner to match the bootstrap within, and (b) what else should be there, beside margins, to wrap all the inner stuff and still have it work well?

3 Answers

Just use:

<Grid bsClass="container">
...
</Grid>

In addition to react-bootstrap you can also include the Bootstrap CSS in your project by running:

  1. Install bootstrap npm module

    npm install --save bootstrap@latest
    
  2. Import the CSS by

    import 'bootstrap/dist/css/bootstrap.css';
    

    in your app's root component. If you use create-react-app you can use theindex.js file for that.

  3. Now you can use all Bootstrap classes in your project like so

    <div className="container"></div>
    

    or

    <Grid className="container"></Grid>
    
Related