Grid container like Bootstrap container

This can be accomplished using the Grid component and Responsive Breakpoints. Take a look at the Layout, Grid page in the docs.

Here is an example:

const styles = theme => ({
  demo: {
    height: 240,
    background: "#f00",
    [theme.breakpoints.up("lg")]: {
      width: 1170
    }
  }
});

class ResponsiveGrid extends React.Component {
  render() {
    const { classes } = this.props;
    return (
      <Grid container justify="center">
        <Grid
          container
          className={classes.demo}
          alignItems="center"
          justify="center"
        >
          <Grid lg={12} item>Content Here</Grid>
        </Grid>
      </Grid>
    );
  }
}

export default withStyles(styles)(ResponsiveGrid);

We define a set of styles which are added to the component as the classes prop using withStyles. The demo class uses the theme to create a media query for the theme's lg breakpoint. For viewports lg or larger, width will be set to 1170.

A large viewport is considered to be between 1280 and 1919 px. These are the defaults and are based on the Material Design standard.

Read more about Responsive Breakpoints and see this codesandbox for a working version of my example.

I solved this problem by creating a custom CSS file and pasting in the bootstrap .container class from bootstrap-grid.css file like this.

custom-style.css

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

and simply import this custom-style.css file into your index.js file of your ReactJS project.

import 'path/to/your/custom-style.css';

In material-ui, Predefined components have their own paddings setup and when combining them with our custom .container class, it might give additional un-wanting padding, to overcome this problem, we can write our helper classes in the same custom-style.css file like this.

// padding helper classes
.p-0 {
  padding: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.ptb-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

after this is setup, we can use our custom classes just like we use it in html markup, but in React, with className property

<Grid container>
  <AppBar position="static">
    <div className="container">
      <Toolbar className="p-0" >
        <Typography variant="h6" color="inherit" className={classes.grow}>
          Learning
        </Typography>
        <Hidden xsDown>
          <Button color="inherit">Login</Button>
          <Button color="inherit">Register</Button>
        </Hidden>
        <Hidden smUp>
          <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
            <MenuIcon />
          </IconButton>
        </Hidden>
      </Toolbar>
    </div>
  </AppBar>
</Grid>

and now it is aligned properly just like bootstrap .container class