Bulma Responsive size

Bulma responsive size is used to make your website responsive. You can choose a specific size for each viewport width. You simply need to append the viewport width to the size modifier.

Responsive size classes:

is-size-1-mobile: This class can be used for a mobile device if the width is up to 768px.
is-size-1-touch: This class can be used for mobile and tablet devices if the width is between 768px to 1023px.
is-size-1-tablet: This class can be used for tablets, small desktops, desktops, widescreen, and full HD devices if the width is between 768px to 1215px.
is-size-1-desktop: This class can be used for small desktops, widescreen, and full HD devices, if the width is between 1024px to 1408px and above.
is-size-1-widescreen: This class can be used for wide screen and full HD devices, If the width is between 1216px to 1408px and above.
is-size-1-fullhd: This class can be used for desktop and widescreen devices if the width is 1408px and above.

Note: You can use the same logic for each of the 7 sizes, you have to change the numeric value of 1 and that can be anything between 1 to 7.

Example: Below example illustrate Bulma Responsive size

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Bulma Typography</title>
    <link rel='stylesheet'
          href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css'>
</head>

<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h1>
    <b>Bulma Responsive Size </b>
    <br>
    <div class="container">
        <p class="is-size-4-mobile">GeeksforGeeks</p>


        <p class="is-size-4-touch">GeeksforGeeks</p>


        <p class="is-size-4-tablet">GeeksforGeeks</p>


        <p class="is-size-4-desktop">GeeksforGeeks</p>


        <p class="is-size-4-widescreen">GeeksforGeeks</p>


        <p class="is-size-4-fullhd">GeeksforGeeks</p>


    </div>
</body>
</html>

Output:

Example2: Below example illustrate Bulma Responsive size

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Bulma Typography</title>
    <link rel='stylesheet'
        href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css'>

<style> 
    div{
        
        background-color:lightgreen;
        border:2px solid black;
        margin:10px;
    }
</style>

</head>


<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h1>
    <b>Bulma Responsive Size </b>
    <br>
    <div class="container">
        <div class="is-size-4-mobile">GeeksforGeeks</div>

        <div class="is-size-4-touch">GeeksforGeeks</div>

        <div class="is-size-4-tablet">GeeksforGeeks</div>

        <div class="is-size-4-desktop">GeeksforGeeks</div>

        <div class="is-size-4-widescreen">GeeksforGeeks</div>

        <div class="is-size-4-fullhd">GeeksforGeeks</div>

    </div>
</body>
</html>

Output:

Explore