Open In App
Related Articles

Bulma Nesting

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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=
  </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>

                    

Output:

The below output is created after changing the viewport into different device sizes.

Reference: https://bulma.io/documentation/columns/nesting/



Last Updated : 30 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads