How to replace container class in react-bootstrap

Question

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?

Solution 1

You can :

• Use the reactstrap lib that contains this Container comp you are looking for
• Use the bootstrap container CSS class :

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

In both case, a <link rel="stylesheet" href="path/to/bootstrap/css/lib"> will be required to get this working.

Solution 2

React bootstrap actually does have a "container". Its the Grid component.

When you apply the fluid property to it, it makes the 'container' span the width of your monitor. Then as usual you would apply a Row component from react-bootstrap (which is basically the <div class="row"></div> component) and underneath that you would then apply the Col component also from react-bootstrap (which is basically the <div class="col-md-4"></div> etc html component.

If you don't want to apply a width to the grid container the size of the monitor you can simply just not include the fluid property to it and it will work just like a normal div container.

The grid follows the same 12-column rule like regular bootstrap