On mobile sm devices, I am trying to achieve padding: 0, but so far nothing has worked.
I referenced this post on Stack Overflow and also attempted the code below:
The default padding of 15px on the right and left for
col-*-12is causing issues. I only want this padding value to be zero on mobile devices.To clarify further, I need the padding to be zero only on mobile devices, while on all other devices it should adhere to the padding from
col-*-12.
Here is a brief example of what I have tried:
Just for your information (FYI)
Using the class col-lg-12 col-md-12 px-0 px-md-2, I can achieve padding: 0 on mobile devices. However, I do not want to override the padding-right and padding-left properties from col-*-12. I would like to utilize the 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>