Bulma - Columns Responsiveness & Nesting | Adglob Infosystem Pvt Ltd

In this guide, we will discuss Columns Responsiveness & Nesting in Bulma.

Description

Bulma provides responsive columns in the different types of screens like mobile devices, tablets, and desktop. You can display the columns in the mobile, by adding is-mobile modifier within the columns container or else if you wish to display the columns only on desktop, then add is-desktop modifier within the columns container.

Let’s create a simple example for mobile and desktop columns as shown below −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Columns Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Mobile Columns
            </span>
            <br>
            <br>
            
            <div class = "columns is-mobile">
               <div class = "column">
                  <p class = "has-text-black has-background-info">First column</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info">Second column</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info">Third column</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info">Fourth column</p>
               </div>
            </div>
            <br>
            
            <span class = "title">
               Desktop Columns
            </span><br><br>
            
            <div class = "columns is-desktop">
               <div class = "column">
                  <p class = "has-text-black has-background-info">First column</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info">Second column</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info">Third column</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info">Fourth column</p>
               </div>
            </div>
            
         </div>
      </section>
   </body>
</html>

It displays output as shown below −

Nesting Columns

Bulma allows nesting of columns within another column to build responsive columns.

The below simple example demonstrates nesting of columns −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Columns Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Nesting Columns
            </span>
            <br>
            <br>
            
            <div class = "columns">
               <div class = "column">
                  <p class = "has-background-info">First column</p>
                  <div class = "columns is-mobile">
                     <div class = "column is-size-6">
                        <p class = "has-background-primary">First nested column</p>
                     </div>
                     <div class = "column is-size-6">
                        <p class = "has-background-primary">Second nested column</p>
                     </div>
                  </div>
               </div>
               
               <div class = "column">
                  <p class = "has-background-info">Second column</p>
                  <div class = "columns is-mobile">
                     <div class = "column is-4">
                        <p class = "has-background-primary">is-4</p>
                     </div>
                     <div class = "column is-5">
                        <p class = "has-background-primary">is-5</p>
                     </div>
                     <div class = "column is-3">
                        <p class = "has-background-primary">is-3</p>
                     </div>
                  </div>
               </div>
               
            </div>
         </div>
      </section>
      
   </body>
</html>

It displays the output as shown below −

Next Topic : Click Here