Bulma - Column layout and Sizes | Adglob Infosystem Pvt Ltd

In this guide, we will discuss Column layout and sizes in Bulma.

Description

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 −

Column Sizes

Bulma provides following classes to change the size of a single column −

is-three-quarters
is-two-thirds
is-half
is-one-third
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 −

12 Columns System

Bulma provides responsive grid system, which is divided into 12 columns in a container.

is-2
is-3
is-4
is-5
is-6
is-7
is-8
is-9
is-10
is-11
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 −

Offset and Narrow 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 −

Next Topic : Click Here