Open In App
Related Articles

Bulma Responsive size

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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=
</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=
 
<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:

 



Last Updated : 13 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads