CODEWITHSUNDEEP
htmlcssbootstrap-4cross-platformpadding
sanoj lawrence
sanoj lawrence

Reputation: 993

how to add 0 padding only on mobile device using bootstrap

I want padding: 0 only on mobile sm devices

I tried this as reference and I also tried below code, but nothing works

Since col-*-12 has default padding of 15px on right and left i want this col- value to be zero only on mobile.

in more detail only on mobile device the padding should be zero, and all other device the padding should add from col-*-12

Below a short example I tried:

FYI

I can make padding: 0 only on mobile with this class col-lg-12 col-md-12 px-0 px-md-2, I don't want to override padding-right and padding-left from col-*-12, so I want to make use of padding from col-*-12

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container-fluid bg-white shadow-sm pt-3">
  <div class="row">
    <div class="col-lg-12 col-md-12 px-4 px-sm-0">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb shadow-sm rounded-0-sm">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item">
            <a href="/ads/car/">
              this is categroy
            </a>
          </li>
          <li class="breadcrumb-item">
            this if file name
          </li>
          <li class="breadcrumb-item text-secondary text-wrap text-break">
            cate file name
          </li>
        </ol>
      </nav>
    </div>
  </div>
</div>

Upvotes: 1

Views: 7281

Answers (2)

Jezrel Dave
Jezrel Dave

Reputation: 99

Mobile devices has an xs size and not sm.

You can use:

<div class="container-fluid bg-white shadow-sm pt-3">
  <div class="row">

//use xs property on mobile devices
    <div class="col-lg-12 col-md-12 px-xs-0 px-sm-4">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb shadow-sm rounded-0-sm">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item">
            <a href="/ads/car/">
              this is categroy
            </a>
          </li>
          <li class="breadcrumb-item">
            this if file name
          </li>
          <li class="breadcrumb-item text-secondary text-wrap text-break">
            cate file name
          </li>
        </ol>
      </nav>
    </div>
  </div>
</div>```

Upvotes: 2

Ahmed Nour Eldeen
Ahmed Nour Eldeen

Reputation: 50

you can using media query : xl: min-width: 1200px, lg: min-width: 992px, md: min-width: 768px, sm: min-width: 576px, xs: min-width: 0.

https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp

Upvotes: 0

Related Questions