Bulma Mobile columns

Last Updated : 30 Jan, 2022

Bulma is a free and open-source CSS framework that can be used as an alternative to Bootstrap. It comes with pre-built components like buttons and icons. In this article, we will be seeing how to use Bulma columns on mobile.

By default, the columns in Bulma are activated on tablets and upward screen sizes. In mobile devices, columns are stacked on top of each other, but if you want to enable columns on mobiles, the is-mobile CSS class can be used on the columns container. If you want to activate columns only on desktops and upwards, the is-desktop CSS class can be used on the columns container.

Bulma Columns CSS Classes:

is-mobile: This class is used on the columns container when you want to disable the stacking of columns on mobile devices.
is-desktop: This class is used on the columns container when you want to enable columns only on desktops and upwards.

Syntax:

<div class="columns Columns-CSS-Classes">
  ...
</div>

Example: The below example shows the use of Columns CSS classes in Bulma.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Mobile Columns</title> 
    <link rel='stylesheet'
          href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
  
    <style> 
        .container{ 
            margin-top: 25px; 
        } 
    </style> 
</head> 
  
<body class="has-text-centered"> 
    <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1> 
    <b class="is-size-4">Bulma Mobile Columns</b> 
    <div class="container"> 
        <p><b>Default Columns:</b></p> 
  
        <div class="columns"> 
            <div class="column"> 
                <div class="notification is-link"> 
                    1 
                </div> 
            </div> 
            <div class="column"> 
                <div class="notification is-link"> 
                    2 
                </div> 
            </div> 
            <div class="column"> 
                <div class="notification is-link"> 
                    3 
                </div> 
            </div> 
            <div class="column"> 
                <div class="notification is-link"> 
                    4 
                </div> 
            </div> 
        </div> 
  
        <p><b>Columns with <i>is-mobile</i> CSS class:</b></p> 
  
        <div class="columns is-mobile"> 
            <div class="column"> 
                <div class="notification is-link"> 
                    1 
                </div> 
            </div> 
            <div class="column"> 
                <div class="notification is-link"> 
                    2 
                </div> 
            </div> 
            <div class="column"> 
                <div class="notification is-link"> 
                    3 
                </div> 
            </div> 
            <div class="column"> 
                <div class="notification is-link"> 
                    4 
                </div> 
            </div> 
        </div> 
        <p><b>Columns with <i>is-desktop</i> CSS class:</b></p> 
  
        <div class="columns is-desktop"> 
            <div class="column"> 
                <div class="notification is-link"> 
                    1 
                </div> 
            </div> 
            <div class="column"> 
                <div class="notification is-link"> 
                    2 
                </div> 
            </div> 
            <div class="column"> 
                <div class="notification is-link"> 
                    3 
                </div> 
            </div> 
            <div class="column"> 
                <div class="notification is-link"> 
                    4 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>