Responsiveness

Here are the standard screen sizes Bulma uses:

This table shows how different size settings appear on various screen sizes:

You can use these tiny and jumbo size controls on many things, like buttons, tags, titles, icons, and form fields. You can control the sizing of elements on specific screen sizes by using is-{tiny/jumbo}-{suffix} where suffix is any of the above.

HTML Example with Buttons

<div class="buttons">
            <button class="button is-tiny-mobile">Tiny on Mobile</button>
            <button class="button is-tiny-tablet">Tiny on Tablet+</button>
            <button class="button is-tiny-desktop">Tiny on Desktop+</button>
            <button class="button is-tiny-widescreen">Tiny on Widescreen+</button>
            <button class="button is-tiny-fullhd">Tiny on FullHD+</button>
        </div>

        <div class="buttons">
            <button class="button is-jumbo-mobile">Jumbo on Mobile</button>
            <button class="button is-jumbo-tablet">Jumbo on Tablet+</button>
            <button class="button is-jumbo-desktop">Jumbo on Desktop+</button>
            <button class="button is-jumbo-widescreen">Jumbo on Widescreen+</button>
            <button class="button is-jumbo-fullhd">Jumbo on FullHD+</button>
        </div>
        <div class="buttons">
            <button class="button is-tiny-tablet-only">Tiny on Tablet Only</button>
            <button class="button is-tiny-desktop-only"<Tiny on Desktop Only</button>
            <button class="button is-tiny-widescreen-only">Tiny on Widescreen Only</button>
        </div>

        <div class="buttons">
            <button class="button is-jumbo-tablet-only">Jumbo on Tablet Only</button>
            <button class="button is-jumbo-desktop-only">Jumbo on Desktop Only</button>
            <button class="button is-jumbo-widescreen-only">Jumbo on Widescreen Only</button>
        </div>

This extension also lets you control text size in new ways. You can make text:

• Extra small or large using is-size-{size}-tiny-{suffix} or is-size-{size}-jumbo-{suffix} along with Bulma's default text sizes (like is-1 for largest to is-7 for smallest) and suffix as the desired screen size.
• Change text size for printing:
  • For printing: Use classes like is-size-4-jumbo-print (meaning "jumbo size 4 when printed").

HTML Example (Responsive Typography)

                <p class="is-size-7-tiny-mobile">This text is tiny on mobile.</p>
        <p class="is-size-1-jumbo-desktop">This text is jumbo on desktop.</p>
        <p class="is-size-4-tiny-print">This text is tiny specifically for print.</p>
                

This text is tiny on mobile.

This text is jumbo on desktop.

This text is tiny specifically for print.