How to apply class no-gutters only to mobile view


Topic: How to apply class "no-gutters" only to mobile view

sergeysh asked 5 years ago

Please help! How can I apply the class .no-gutters ONLY to mobile view of the website? This is really what I need, but not on desktop view. I need it only at smartphones.


sergeysh answered 5 years ago

That's what I did, please advice if you know better solution:

<div class="row no-gutters">
<div class="col-12 col-md-4 px-md-2">

Konrad Stępień staff answered 5 years ago

Hi @sergeysh,

You can toggle class via jQuery.

jQuery

$(document).ready(function($) {
  let alterClass = function() {
    let ww = document.body.clientWidth;
    if (ww < 400) {
      $('#YOUR-ELEMENT').addClass('no-gutters');
    } else if (ww >= 401) {
      $('#YOUR-ELEMENT').removeClass('no-gutters');
    };
  };
  $(window).resize(function(){
    alterClass();
  });
  //Fire it when the page first loads:
  alterClass();
});

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: Samsung Galaxy and desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No