Bulma - Column layout and Sizes

Bulma allows building column layout very easily by adding column class in the container.
Add the column class within columns container, to create each column with equal width in the webpage as shown in the below example.
Note − Resize the coding-ground output window to see the changes occurring according to window size.
<!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">
               Column Layout
            </span><br><br>
            <div class = "columns">
               <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 −
First column
Second column
Third column
Fourth column
Bulma provides following classes to change the size of a single column −
is-three-quarters
is-three-quarters
is-two-thirds
is-two-thirds
is-half
is-half
is-one-third
is-one-third
is-one-quarter
is-one-quarter
Let's create a simple example by using the above column sizes −
Note − Resize the coding-ground output window to see the changes occurring according to window size.
<!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">
               Column Sizes
            </span><br><br>
            
            <div class = "columns">
               <div class = "column is-three-quarters">
                  <p class = "has-text-black has-background-info">is-three-quarters</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-grey-lighter">Auto</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-grey-lighter">Auto</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-two-thirds">
                  <p class = "has-text-black has-background-info">is-two-thirds</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-grey-lighter">Auto</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-grey-lighter">Auto</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-half">
                  <p class = "has-text-black has-background-info">is-half</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-grey-lighter">Auto</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-grey-lighter">Auto</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-one-third">
                  <p class = "has-text-black has-background-info">is-one-third</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-grey-lighter">Auto</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-grey-lighter">Auto</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-one-quarter">
                  <p class = "has-text-black has-background-info">is-one-quarter</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-grey-lighter">Auto</p>
               </div>
            </div>
         </div>
      </section>
   </body>
</html>
It displays output as shown below −
is-three-quarters
Auto
Auto
is-two-thirds
Auto
Auto
is-half
Auto
Auto
is-one-third
Auto
Auto
is-one-quarter
Auto
Bulma provides responsive grid system, which is divided into 12 columns in a container.
is-2
is-2
is-3
is-3
is-4
is-4
is-5
is-5
is-6
is-6
is-7
is-7
is-8
is-8
is-9
is-9
is-10
is-10
is-11
is-11
is-12
is-12
The below example shows usage of above 12 column classes −
Note − Resize the coding-ground output window to see the changes occurring according to window size.
<!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">
               12 Columns System
            </span><br><br>
            <div class = "columns">
               <div class = "column is-2">
                  <p class = "has-text-black has-background-info has-text-centered">is-2</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info has-text-centered">Remaining 10 columns</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-3 ">
                  <p class = "has-text-black has-background-info has-text-centered">is-3</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info has-text-centered">Remaining 9 columns</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-4 ">
                  <p class = "has-text-black has-background-info has-text-centered">is-4</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info has-text-centered">Remaining 8 columns</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-5 ">
                  <p class = "has-text-black has-background-info has-text-centered">is-5</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info has-text-centered">Remaining 7 columns</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-6 ">
                  <p class = "has-text-black has-background-info has-text-centered">is-6</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info has-text-centered">Remaining 6 columns</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-7 ">
                  <p class = "has-text-black has-background-info has-text-centered">is-7</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info has-text-centered">Remaining 5 columns</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-8 ">
                  <p class = "has-text-black has-background-info has-text-centered">is-8</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info has-text-centered">Remaining 4 columns</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-9 ">
                  <p class = "has-text-black has-background-info has-text-centered">is-9</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info has-text-centered">Remaining 3 columns</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-10 ">
                  <p class = "has-text-black has-background-info has-text-centered">is-10</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info has-text-centered">Remaining 2 columns</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-11 ">
                  <p class = "has-text-black has-background-info has-text-centered">is-11</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info has-text-centered"> Remaining 1 column</p>
               </div>
            </div>
         </div>
      </section>
   </body>
</html>
It displays output as shown below −
is-2
Remaining 10 columns
is-3
Remaining 9 columns
is-4
Remaining 8 columns
is-5
Remaining 7 columns
is-6
Remaining 6 columns
is-7
Remaining 5 columns
is-8
Remaining 4 columns
is-9
Remaining 3 columns
is-10
Remaining 2 columns
is-11
 Remaining 1 column
Bulma provides offset classes for spacing the elements in the responsive grid system. You can use offet as .is-offet-x, where x is a name of column class and use the narrow column to take the required space in a container by using is-narrow modifier.
Let's create a simple example by using the offset (using is-offset class) and narrow (using is-narrow class) column −
<!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">
               Offset
            </span><br><br>
            <div class = "columns is-mobile">
               <div class = "column is-half is-offset-one-quarter">
                  <p class = "has-text-black has-background-info has-text-centered">is-half is-offset-one-quarter</p>
               </div>
            </div>
            <div class = "columns is-mobile">
               <div class = "column is-three-fifths is-offset-one-fifth">
                  <p class = "has-text-black has-background-info has-text-centered">is-three-fifths is-offset-one-fifth</p>
               </div>
            </div>
            <div class = "columns is-mobile">
               <div class = "column is-4 is-offset-8">
                  <p class = "has-text-black has-background-info has-text-centered">is-4 is-offset-8</p>
               </div>
            </div>
            <div class = "columns is-mobile">
               <div class = "column is-11 is-offset-1">
                  <p class = "has-text-black has-background-info has-text-centered">is-11 is-offset-1</p>
               </div>
            </div>
            <br>
            
            <span class = "title">
               Narrow Column
            </span>
            <div class = "columns">
               <div class = "column is-narrow">
                  <div class = "box has-background-info" style="width: 200px;">
                     <p class = "title is-5">Narrow column</p>
                     <p class = "subtitle">Column has 200px width</p>
                  </div>
               </div>
               <div class = "column">
                  <div class = "box has-background-info">
                     <p class = "title is-5">Flexible column</p>
                     <p class = "subtitle">Column takes remaining available space</p>
                  </div>
               </div>
            </div>
         </div>
      </section>
      
   </body>
</html>
It displays output as shown below −
is-half is-offset-one-quarter
is-three-fifths is-offset-one-fifth
is-4 is-offset-8
is-11 is-offset-1
Narrow column
Column has 200px width
Flexible column
Column takes remaining available space
 Print
 Add Notes
 Bookmark this page