Is there a way to remove padding-x from bootstrap column on mobile without custom css?-CodePudding

Because Bootstrap gives the possibility of managing styles from classes, I was wondering if I could remove the column padding on mobile only with bootstrap classes.

You can remove padding on larger screens by using for example px-lg-0 but it seems that you can't get the same result with smaller screen.

I tryed px-0 px-lg-1, px-0 px-lg-2 or px-0 px-lg-3 but none of them have the same padding as the original column padding.

You can see the issue in the snippet below by running it on full screen with a width >= 992px.

.container{
  border:3px solid orange;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
  <div >
    <div >
      <div >A</div>
      <div >B</div>
      <div >C</div>
  </div>
</div>

CodePudding user response：

Also, unless you need to have columns with and without container spacing, I would apply the padding settings to the container div itself rather than the individual columns:

For example,

<div >

CodePudding user response：

Hopefully, I am understanding you correctly. You could test setting "--bs-gutter-x" to "0" for .container in a custom css file if you don't want to go the SASS route, as in the following (see the snippet in action at https://codepen.io/sam-miller-the-flexboxer/pen/mdxbQGr)?

.container{
  border:3px solid orange;
  /* redefined bootstrap variable */
  --bs-gutter-x: 0;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
  <div >
    <div >
      <div >A</div>
      <div >B</div>
      <div >C</div>
  </div>
</div>