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

Question

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 class="container">
    <div class="row">
      <div class="col-12 bg-light text-dark">A</div>
      <div class="col-12 bg-dark text-light px-0 px-lg-2">B</div>
      <div class="col-12 bg-light text-dark px-0 px-lg-3">C</div>
  </div>
</div>

B & C has 0 padding on screen. it's working properly I can't see where it doesn't. — UNRIVALLEDKING, Jun 24 '22 at 08:30
@UNRIVALLEDKING Try running the snippet in full page, screen width >= 992px — Cédric, Jun 24 '22 at 08:31
you want padding x 0 in large screen?? then replace `px-lg-2` and `px-lg-3` with `px-lg-0` — UNRIVALLEDKING, Jun 24 '22 at 08:48
@UNRIVALLEDKING Thanks for trying to help but you did not understand the question. I'm asking if there is a way to remove the padding on small screen but keep the original padding on large screen without custom css. — Cédric, Jun 24 '22 at 08:58
I dont think there is a good reason to not use custom CSS, but maybe look arround column size like `col-xs` or `col-sm` ... Otherwise, maybe this post could help https://stackoverflow.com/questions/16410659/bootstrap-removing-padding-or-margin-when-screen-size-is-smaller — Emerald Cottet, Jun 24 '22 at 09:30
@EmeraldCottet Because if I can do it without custom css, I shouldn't add css that would do the same thing. The library provides tools to manage spaces so I'm surprised that you can do something in one way but not the other. — Cédric, Jun 24 '22 at 09:44
@Cédric I get your query now, sorry i misunderstood before, the difference of that padding is cause of `$spacer` as you might know that margin and padding in bootstrap works like this `.px-2 { padding-left: ($spacer * .5) !important; padding-right: ($spacer * .5) !important; }` by default spacer value is 1rem you can change it . check bootstrap documentation for more info [link](https://getbootstrap.com/docs/4.1/getting-started/theming/#variable-defaults) you have to find the default padding of that col and set spacer variable according to that. — UNRIVALLEDKING, Jun 24 '22 at 09:46

Cédric · Accepted Answer · 2022-10-14T09:59:31.257

Bootstrap provides gutters class that enable you to change the value of the variable used for the padding.

Instead of px-0 px-lg-3, I can use gx-0 gx-lg-4.

.container{
  border:3px solid orange;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-12 bg-light text-dark">A</div>
    <div class="col-12 bg-dark text-light gx-0 gx-lg-4">B</div>
    <div class="col-12 bg-light text-dark gx-0 gx-lg-4">C</div>
  </div>
</div>

Sam Miller · Answer 2 · 2022-06-27T16:09:01.730

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 class="container">
    <div class="row">
      <div class="col-sm-4 bg-light text-dark">A</div>
      <div class="col-sm-4 bg-dark text-light">B</div>
      <div class="col-sm-4 bg-light text-dark">C</div>
  </div>
</div>

score -1 · Answer 3 · answered Jun 24 '22 at 21:40

-1

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 class="container px-0 px-lg-3">

answered Jun 24 '22 at 21:40

Sam Miller

95
1
6

I made a snippet with 1 column per line to make it more clear but I need multiples columns per line in desktop, and I need to remove the column padding. In my situation `px-lg-3` wont work as I mentioned in the question. – Cédric Jun 26 '22 at 18:16

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

3 Answers3