Bootstrap - Removing Padding or Margin When Screen Size Is Smaller

Bootstrap - Removing padding or margin when screen size is smaller

The @media query specifically for 'phones' is..

@media (max-width: 480px) { ... }

But, you may want to remove the padding/margin for any smaller screen sizes. By default, Bootstrap adjusts margins/padding to the body, container and navbars at 978px.

Here are some queries that have worked (in most cases) for me:

@media (max-width: 978px) {
    .container {
      padding:0;
      margin:0;
    }

    body {
      padding:0;
    }

    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
      margin-left: 0;
      margin-right: 0;
      margin-bottom:0;
    }
}

Demo

Update for Bootstrap 4

Use the new responsive spacing utils which let you set padding/margins for different screen widths (breakpoints):
https://stackoverflow.com/a/43208888/171456

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

It seems that 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>

How to remove padding when the size of the webpage decreases

Media queries are your friend. As I understand it you are currently trying to adapt the desktop css for the mobile version. This would result in this query.

@media (min-width: 992px) {
    .footer {
        margin-left: 0;
    }
}

However the mobile first approach would be to start with the smaller screen and only add the margin for large screens.

.footer {
    margin-left: 0;
}

@media (min-width: 992px) {
    .footer {
        margin-left: 225px;
    }
}

How to remove padding from rows on mobile devices in bootstrap 4.5?

I've solved the problem by writing my own media-queryes as the following:

@media screen and (min-width: 600px) { // setting default row and cols values for non mobile screens
  .row {
    margin-left: -15px;
    margin-right: -15px;
}

  .row [class*='col']{
    padding-left: 15px;
    padding-right: 15px;
  }

}

.row {  // setting rows margin and cols padding to 0 for mobile screens
  margin-left: 0;
  margin-right: 0;
}

.row [class*='col']{
  padding-left: 0;
  padding-right: 0;
}

And by adding this to container class class="container px-0 px-sm-3"

Here is the result:

Sample Image

Bootstrap - Removing Padding or Margin When Screen Size Is Smaller