The grid collapses whenever I add any margin or padding

Question

The grid collapses whenever I add any margin or padding

My current setup involves using the bootstrap-grid system alongside Material UI, which has been working well overall. However, I am facing a specific issue where the grid system does not maintain its slot space after applying padding or margin. This causes items to move down to the next row or line when there is insufficient space.
Here is an example
In the provided example, each button is set to have a grid size of 3, indicating that there should be 4 buttons in each row. Due to slight padding and margin adjustments, only 3 buttons are displayed in each line.
I am looking for a solution where the items automatically resize their width when margin and padding are added, rather than moving to the next row or line. How can this be achieved?
Thank you.

css reactjs material-ui bootstrap-grid

Answer 1

Answer №1

Avoid using the bootstrap col- classes directly on your button. Instead, encapsulate your button within a div element as shown below:

for (var i = 0; i < 10; i++) {
    buttonArray.push(
      <div className="col-sm-3 col-md-3 col-lg-3">
      <Button
        variant="contained"
        className={classes.button + " "}
      >
        Default
      </Button>
      </div>
    );
  }

Now you only need to adjust the button styling by modifying or removing this:

const useStyles = makeStyles(theme => ({
  button: {
    padding: theme.spacing(1),
    margin: theme.spacing(1)
  }
}));

If desired, you can add padding or margin to your button. But be cautious not to apply padding or margin directly to elements like .row or .col-*.

Answer 2

Avoid using the bootstrap col- classes directly on your button. Instead, encapsulate your button within a div element as shown below:

for (var i = 0; i < 10; i++) {
    buttonArray.push(
      <div className="col-sm-3 col-md-3 col-lg-3">
      <Button
        variant="contained"
        className={classes.button + " "}
      >
        Default
      </Button>
      </div>
    );
  }

Now you only need to adjust the button styling by modifying or removing this:

const useStyles = makeStyles(theme => ({
  button: {
    padding: theme.spacing(1),
    margin: theme.spacing(1)
  }
}));

If desired, you can add padding or margin to your button. But be cautious not to apply padding or margin directly to elements like .row or .col-*.

Answer 3

Answer №2

If you want to enclose it in a Div tag, here's how:

for (var i = 0; i < 10; i++) {
    buttonArray.push(
      <Div className="col-sm-3 col-md-3 col-lg-3">
      <Button
        variant="contained"
        className={classes.button}
      >
        Default
      </Button></Div>
    );
  }

Remember to import Div before using it:

import Div from "@material-ui/core/Grid";

Check out the example at: https://codesandbox.io/s/bootstrap-grid-testcase-efi4u

Answer 4

If you want to enclose it in a Div tag, here's how:

for (var i = 0; i < 10; i++) {
    buttonArray.push(
      <Div className="col-sm-3 col-md-3 col-lg-3">
      <Button
        variant="contained"
        className={classes.button}
      >
        Default
      </Button></Div>
    );
  }

Remember to import Div before using it:

import Div from "@material-ui/core/Grid";

Check out the example at: https://codesandbox.io/s/bootstrap-grid-testcase-efi4u

The grid collapses whenever I add any margin or padding

Answer №1

Answer №2

Similar questions

Are there any better methods for creating div backgrounds and borders using CSS?

it results in an error when attempting to deconstruct an object

How can we implement conditional mandatory fields in a form using Yup and react-hook-form?

Constructing and delivering React/Next.js applications through AWS S3

Exploring the Selection State of Rows in Ant Design Table and Passing it to expandRowRender Component

Managing file uploads in Django Rest Framework

What is the best way to conceal the mobile navigation menu at the bottom of the

Linking text to specific spot on image

"Utilizing the power of React Redux toolkit to toggle the visibility of a

Utilize SVG background with transparent text for a clear view of surrounding content

CSS for when the mouse hovers over an element

How can I create the effect of text changing color automatically after a specified time period has elapsed

Data manipulation with Next.js

Is it feasible to have a set number of character lines per <p> tag without relying on monospaced fonts?

Unexpected issue encountered for identifiers beginning with a numerical digit

"Step-by-step guide on assigning a class to a Component that has been

Modify the icon for the action menu in Material-UI data grids

The text for the Google chart is nowhere to be found

When viewed on a mobile device, the page defaults to displaying the NumPad instead of the Text Keyboard in Angular

The fusion of Material UI with React