Toggle class on breakpoint

I Need Help
1

Hi,
I’ve read the doc about custom classes that can be modified for the four breakpoints, but what about toggling classes? Bootstrap provides a truckload of utility classes that one might want to use “as is”, e.g. py- for the padding top/bottom.
I can’t nor want to edit those built-in classes, just switch them on depending on the breakpoint, for instance:

LG: py-4
MD: py-2
SM, XS: py-1

Is this possible?
Thanks!

Davide

2

you can’t, to my knowledge, tell a block that you will have the breakpoint specific class. However, you can duplicate the block in question and only activate it for the targeted breakpoint. Here you would need 3 blocks with their corresponding py and only activate them at the breakpoint.

If I’m not mistaken and from experience, a block with a py-4 for LG for example, it will apply regardless of the breakpoint chosen. In any case that’s how it reacted on my side

3

Yes you can, the notation of the class is

{property}{sides}-{breakpoint}-{size}

So you can add the following classes

.py-1 .py-md-2 .py-lg-4

Note there are some changes with BS5. Start and end are used instead of left and right. So pr becomes pe

1 Like
4

Thanks, much appreciated!