Bulma - Columns Responsiveness & Nesting

Quiz

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 −

bulma_columns.htm

Print Page