Grid container like Bootstrap container

Question

So, I want to create a page layout what will look like this:

For example, in Bootstrap I can simple write:

<div class="container">
  <!-- Content here -->
</div>

And everything will be cool.

Is there a good clean solution to do something like this in Material-UI? By default Grid system create fluid-container with full width.

Answer 1

If you're looking for something that behaves like bootstrap's .container then I would use Material UIs <Container /> tag. As a starting wrapper/container, I would not use the <Grid /> tag.

<Container maxWidth="lg">
  <!-- Content here -->
</Container>

https://material-ui.com/components/container/