Bulma Nesting

Last Updated : 30 Jan, 2022

In this article, we’ll be seeing about nesting in Bulma. Nesting is allowed in the Bulma framework as it provides the flexibility to use columns within another column for responsiveness in the column.

Bulma Nesting Class: The nesting in Bulma can be done using columns and column classes there no predefined call for that.

Syntax:

<div class="columns">
  <div class="column">
      <div class="columns">
         <div class="column">
  ....

Below example illustrate the Bulma Nesting:

Example:

HTML

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet"
          href= 
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> 
  </head> 
  <body class="has-text-centered"> 
    <h1 class="title"> 
      GeeksforGeeks 
    </h1> 
    <div class="content"> 
      <div class="columns"> 
        <div class="column"> 
          <p class="has-background-danger"> 
            Column One</p> 
  
          <div class="columns is-mobile"> 
            <div class="column"> 
              <p class="has-background-primary"> 
                Nested column One 
              </p> 
  
            </div> 
            <div class="column"> 
              <p class="has-background-primary"> 
                Nested column Two 
              </p> 
  
            </div> 
          </div> 
        </div> 
        <div class="column"> 
          <p class="has-background-danger"> 
            Column Two 
          </p> 
  
          <div class="columns is-mobile"> 
            <div class="column is-3"> 
              <p class="has-background-info"> 
                Size 3 
              </p> 
  
            </div> 
            <div class="column is-4"> 
              <p class="has-background-info"> 
                Size 4 
              </p> 
  
            </div> 
            <div class="column is-5"> 
              <p class="has-background-info"> 
                Size 5 
              </p> 
  
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
    </body> 
</html>