CODEWITHSUNDEEP
material-ui
Peretz30
Peretz30

Reputation: 1314

Grid container like Bootstrap container

So, I want to create a page layout what will look like this: enter image description here

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.

Upvotes: 15

Views: 13309

Answers (4)

Napoli
Napoli

Reputation: 1403

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/

Upvotes: 4

Ken Gregory
Ken Gregory

Reputation: 7390

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.

Upvotes: 10

Sharud
Sharud

Reputation: 425

Building on OP's comment on OP's post, you can make a specific component that is meant to create a bootstrap style container:

import React from "react";
import { Grid } from "@material-ui/core";

const BootstrapContainerGrid = props => {
  return (
    <Grid container style={{ marginTop: "3em" }}>
      <Grid item lg={2} md={2} sm={1} xs={false} />
      <Grid item lg={8} md={8} sm={10} xs={12}>
        {props.children}
      </Grid>
      <Grid item lg={2} md={2} sm={1} xs={false} />
    </Grid>
  );
};
export default BootstrapContainerGrid;

Then pass in your actual component as a child to this bootstrap style container:

<BootstrapContainerGrid>
  <MyComponent>
    ...
  </MyComponent>
</BootstrapContainerGrid>

Now at least you have reusability and make it easy to edit how your "container" appears.

UPDATE [5/26/19]: Material-ui v4 has a Container component in core "@material-ui/core/Container" which seems to act like a bootstrap container. https://material-ui.com/api/container/

Upvotes: 1

Abid Ali
Abid Ali

Reputation: 770

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

enter image description here

Upvotes: 7

Related Questions