React js / Material UI

reactBootstrap for React js

February 02, 2022

react bootstrap for react js


reactBootstrap Grid System

Auto-layout columns

When no column widths are specified the Col component will render equal width columns

        <Container>
        <Row>
            <Col>1 of 2</Col>
            <Col>2 of 2</Col>
        </Row>
        <Row>
            <Col>1 of 3</Col>
            <Col>2 of 3</Col>
            <Col>3 of 3</Col>
        </Row>
    </Container>


Responsive grids

The Col lets you specify column widths across 6 breakpoint sizes (xs, sm, md, lg, xl and xxl). For every breakpoint, you can specify the amount of columns to span, or set the prop to <Col lg={true} /> for auto layout widths.You can also mix and match breakpoints to create different grids depending on the screen size.

         <Container>
      {/* Stack the columns on mobile by making one full-width
      and the other half-width */}
      <Row>
        <Col xs={12} md={8}>
         xs=12 md=8
        </Col>
        <Col xs={6} md={4}>
          xs=6 md=4
        </Col>
        </Row>

        {/* Columns start at 50% wide on mobile and bump up
        to 33.3% wide on desktop */}
        <Row>
         <Col xs={6} md={4}>
          xs=6 md=4
         </Col>
         <Col xs={6} md={4}>
          xs=6 md=4
         </Col>
         <Col xs={6} md={4}>
          xs=6 md=4
         </Col>
         </Row>

         {/* Columns are always 50% wide, on mobile and desktop */}
          <Row>
           <Col xs={6}>xs=6</Col>
            <Col xs={6}>xs=6</Col>
          </Row>
    </Container>

Grid in MUI.com

Basic grid

Column widths are integer values between 1 and 12; they apply at any breakpoint and indicate how many columns are occupied by the component.

A value given to a breakpoint applies to all the other breakpoints wider than it (unless overridden, as you can read later in this page). For example, xs={12} sizes a component to occupy the whole viewport width regardless of its size.

     
      <Grid container spacing={2}>
        <Grid item xs={8}>
          <Item>xs=8</Item>
        </Grid>
        <Grid item xs={4}>
          <Item>xs=4</Item>
        </Grid>
        <Grid item xs={4}>
          <Item>xs=4</Item>
        </Grid>
        <Grid item xs={8}>
          <Item>xs=8</Item>
        </Grid>
      </Grid>


Grid with multiple breakpoints

For example, xs={12} sm={6} sizes a component to occupy half of the viewport width (6 columns) when viewport width is 600 or more pixels. For smaller viewports, the component fills all 12 available columns.

           <Grid container spacing={2}>
        <Grid item xs={6} md={8}>
          <Item>xs=6 md=8</Item>
        </Grid>
        <Grid item xs={6} md={4}>
          <Item>xs=6 md=4</Item>
        </Grid>
        <Grid item xs={6} md={4}>
          <Item>xs=6 md=4</Item>
        </Grid>
        <Grid item xs={6} md={8}>
          <Item>xs=6 md=8</Item>
        </Grid>
      </Grid>