Open In App

Bulma Responsive size

Improve
Improve
Like Article
Like
Save
Share
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