Topic: How to apply class "no-gutters" only to mobile view
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.
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();
});
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">
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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