Open In App

Bulma Different column sizes per breakpoint

Improve
Improve
Like Article
Like
Save
Share
Report

Bulma is a free, open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.

Bulma columns are designed to work with mobile screen sizes. Usually, it is stacked in the default setting but when it is applied in the desktop screen sizes, the is-desktop class is used. In Bulma, we can set different column sizes per breakpoint using the below-given classes. The different breakpoints are mobile, tablet, desktop, widescreen, and fullhd.

Bulma Different column sizes per breakpoint Class:

The *  in the below-given classes represents one breakpoint name.

  • is-[one/two/three/four]-quarters-*: This class is used to define how many quarters of the area will be occupied at the given breakpoint.
  • is-[one/two/three/four]-[third/fourth]-*: This class is used to specify if the area occupied will be one-fourth or two-thirds i.e., the fractional amount in the given breakpoint.
  • is-half-*: This class is used to specify if half of the area is occupied at the given breakpoint.

Syntax:

<div class="columns is-mobile">
      <div class="column is-three-quarters-mobile 
          is-two-thirds-tablet is-half-desktop 
          is-one-third-widescreen is-one-quarter-fullhd">
          ...
      </div>
</div>

Example 1: The code below demonstrates the usage of the is-two-quarters-mobile is-one-thirds-tablet is-half-desktop is-two-thirds-widescreen is-one-quarter-fullhd classes to one column and no classes to the others.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel='stylesheet' href=
</head>
  
<body>
    <center>
        <h1 style="color:green; font-size:2.5rem;">
            GeeksforGeeks
        </h1>
        <h3 style="font-size:1.5rem; margin-bottom:2rem;">
            Bulma Different column sizes per breakpoint
        </h3>
    </center>
  
    <div class="columns is-mobile">
        <div class="column is-two-quarters-mobile 
            is-one-thirds-tablet is-half-desktop 
            is-two-thirds-widescreen is-one-quarter-fullhd" 
            style="background-color:aquamarine;">
            <p>1st Column</p>
        </div>
        <div class="column">2nd Column</div>
        <div class="column">3rd Column</div>
        <div class="column">4th Column</div>
    </div>
</body>
  
</html>


Output:

 

Example 2: The code below demonstrates the usage of the is-two-quarters-mobile is-one-thirds-tablet is-half-desktop is-two-thirds-widescreen is-one-quarter-fullhd classes to one column and is-three-quarters-mobile is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd to the second one.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel='stylesheet' href=
</head>
  
<body>
    <center>
        <h1 style="color:green; font-size:2.5rem;">
            GeeksforGeeks
        </h1>
          
        <h3 style="font-size:1.5rem; margin-bottom:2rem;">
            Bulma Different column sizes per breakpoint
        </h3>
    </center>
      
    <div class="columns is-mobile">
        <div class="column is-two-quarters-mobile 
            is-one-thirds-tablet is-half-desktop 
            is-two-thirds-widescreen is-one-quarter-fullhd"
            style="background-color: aquamarine;">
            <p>First Column</p>
        </div>
  
        <div class="column is-three-quarters-mobile 
            is-two-thirds-tablet is-half-desktop 
            is-one-third-widescreen is-one-quarter-fullhd"
            style="background-color: greenyellow;">
            <p>Second Column</p>
        </div>
    </div>
</body>
  
</html>


Output:

 

Reference: https://bulma.io/documentation/columns/responsiveness/#different-column-sizes-per-breakpoint  



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