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

user_13940311 0
Viewed 2917

I'm using bootstrap 4.5 in my project, i would use an edge to edge view when the website is opened on a mobile device.

I have a layout as the following

<div class="container">
  <div class="row">
     <div class="col-md-9>...</div>
     <div class="col-md-3>...</div>
</div>

So when it's on a desktop it looks fine but on mobile there is too many padding and i would make the content looks like edge to edge

enter image description here

i've tryed to use no-gutters on row and to remove padding from container but it makes the desktop version look bad..

bootstrap-4 css
4 Answers
<div class="container mx-0 mx-sm-3">
  <div class="row">
     <div class="col-md-9">...</div>
     <div class="col-md-3">...</div>
     </div>
</div>

mx-0 sets the container margin to 0 on the x-axis and then mx-sm-3 sets it back to 3 (1rem) for small and up (sm, md, lg, and xl)

Spacing in Bootstrap

user_1214700

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:

enter image description here

user_139403110
user_60342200

You can add in your html a class named p-sm-0 and p-0 or you can add a media query just for mobile and add to container class in css padding: 0

user_120033280
Related