Skip to content
Related Articles
Open in App
Not now

Related Articles

Bulma Nesting

Improve Article
Save Article
  • Last Updated : 30 Jan, 2022
Improve Article
Save Article

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/


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!