react-bootstrap: content component missing?

Shouldn’t there be Container components to match <div class="container"> and <div class="container-fluid">? I am unable to find their implementations/documentation.

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 15 (8 by maintainers)

Most upvoted comments

Hi, sorry if you are having a bad experience right now.

This component has been named like that for over two years, since the early stage of the project. Neither jquense or taion were involved in that decision. https://github.com/react-bootstrap/react-bootstrap/commit/7d9ec217d26d981354ba6d0120de9f11bc7b65e4. We’re sorry if this made it harder for you to find it, but that’s how it is.

To answer your original question, the <div className="container"/> can be rendered as follow <Grid/>.

For informational purposes, it is documented right here http://react-bootstrap.github.io/components.html#grid-props-grid. I do agree it could be emphasized a bit to make it easier to find.

In the mean time, if you want to ensure that your code is using the name you want, you can always import it as follow import { Grid as Container } from 'react-bootstrap;.

@deanq its moved back to Container in v1 so the docs are correct

@dozoisch I appreciate your human response. Perhaps there is hope for this project afterall. It is never too late to fix what is either broken or misleading. A good library/framework should be easy to reason about. If it were me, I’d start by refactoring out Container from Grid into its own module. That would add clarity for users who already know bootstrap and it could also help to reduce the size of bundles when Grids aren’t being used. In anycase, thanks again for your human response.

What component in the library render’s <div className="container">

Again, Grid is the component you want, replace it’s name with Container if that helps. ALL it is is container.

they have nothing to do with grids other than their ability to contain them.

That’s not quite right, the Grid system is designed so that rows are contained in containers and nothing else. They have negative margin that is offset by the container padding.

the only other place to use a container, is in a Navbar which we handle for you. The name of the class is generic but it’s use and function is not. Also if you poke at the bootstrap source especially the files, you’l notice that you must include the “grid” system to even get the class

Then you didn’t understand it, because it literally just renders <div className="container">.

Did you bother to look at what <Grid> did?