CODEWITHSUNDEEP
cssbootstrap-4
Kasper Juner
Kasper Juner

Reputation: 952

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

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..

Upvotes: 3

Views: 5401

Answers (4)

Kasper Juner
Kasper Juner

Reputation: 952

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

Upvotes: 2

Badis Mariem
Badis Mariem

Reputation: 19

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

Upvotes: 0

Bruce Adams
Bruce Adams

Reputation: 12300

<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

Upvotes: 4

Nico Shultz
Nico Shultz

Reputation: 1872

You can either write your own media-query for this or use the spacing classes provided by bootstrap https://getbootstrap.com/docs/4.0/utilities/spacing/

class="p-0" == padding: 0 !important;

Upvotes: 0

Related Questions