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