Search code examples
cssgridbulma

How to reduce class list in Bulma

How can I reduce the class definition for Bulma column which actually looks like this

<div class="column is-three-quarters-mobile is-three-quarters-tablet is-three-quarters-desctop is-three-quarters-widescreen is-three-quarters-fullhd"></div>

This is really bad. Hope there is a way to only one class to do what I want. Thanks.

Solution

  • Looks like you want your column to have a 3/4 size no matter the size of the viewport.
    You can just use the is-three-quarters class which is gonna work for all sizes except mobile.

    To make it work on mobile too you have to add the is-mobile class to your columns containers as explained in the documentation, so your code looks like this:

    <div class="columns is-mobile">
    <div class="column is-three-quarters"></div> 
</div>