html - Only apply classes on small screen sizes

Question

When I am on a desktop mode I need the navbar to be without any background color. The code for my navbar on desktop mode is:

<nav class="navbar navbar-expand-sm">

But when I go on the small screen devices I need two other classes to be applied to my navbar:

this navbar-light and this bg-light.

How do I do this, using media-queries?

Answer 1

You can always add the classes to the div but have the styling for the classes in the media queries.

   <nav class="navbar navbar-expand-sm navbar-light bg-light">

    @media only screen and (max-width : 480px) {
        .navbar-light{/*your style*/}
        .bg-light{/*your style*/}
    }