Bootstrap form class for specific breakpoints

Question

I would like to know if there is a way to make a Boostrap class specific for a breakpoint. I use w-md-50, w-sm-100, w-lg-75 for form, but it's never working for the specific breakpoint. Is there any class of this kind in bootstrap? thank you.

Answer 1

First of all, No, There isn't any class that can be applied to an element only BETWEEN two breakpoints in bootstrap, you should overwrite your smaller breakpoints in larger ones to handle it

Basically Bootstrap breakpoints are based on min-width, as you can see in BS css files there is no(for example)

(min-width:768px) and (max-width:992px)

So smaller breakpoints will also apply on larger ones unless you specifically change the larger ones

And this is one of Bootstrap's great features as a Mobile First library

I suggest you to embrace it and get used to write smaller breakpoints and overwrite them in larger scales or leave them behind if they fit

If bootstrap breakpoints were based on both min and max width we had to write classes for each and every breakpoints but now we don't need it! In most of cases the smaller breakpoint classes fit on larger scales and we don't need to specify larger ones