columns

Columns powered by Flexbox

nesting



You can nest columns to have more flexibility in your design. You only need to follow this structure:

  • columns: top-level columns container
    • column
      • columns: nested columns
        • column and so on…

The difference with multiline columns is the order in the HTML code: all the blue columns appear before the red ones. Resize to a narrower viewport to see the result.

First column

First nested column

Second nested column

Second column

50%

Auto

Auto

Multiline columns will also have a gap between each line.

                    

                        
                        <div class="columns">
                          <div class="column">
                            <p class="bd-notification is-info">First column</p>
                            <div class="columns is-mobile">
                              <div class="column">
                                <p class="bd-notification is-info">First nested column</p>
                              </div>
                              <div class="column">
                                <p class="bd-notification is-info">Second nested column</p>
                              </div>
                            </div>
                          </div>
                          <div class="column">
                            <p class="bd-notification is-danger">Second column</p>
                            <div class="columns is-mobile">
                              <div class="column is-half">
                                <p class="bd-notification is-danger">50%</p>
                              </div>
                              <div class="column">
                                <p class="bd-notification is-danger">Auto</p>
                              </div>
                              <div class="column">
                                <p class="bd-notification is-danger">Auto</p>
                              </div>
                            </div>
                          </div>
                        </div>
                        

                    
                

Niche Templates

Joo - Niche Multi-Purpose HTML Template
Creative 01
View more
Joo - Niche Multi-Purpose HTML Template
Corporate 01
View more
Joo - Niche Multi-Purpose HTML Template
Burger Restaurant
View more
Joo - Niche Multi-Purpose HTML Template
Wedding
View more
Joo - Niche Multi-Purpose HTML Template
Corporate 02
View more
Joo - Niche Multi-Purpose HTML Template
Barber Shop
View more
Joo - Niche Multi-Purpose HTML Template
Logistics Cargo
View more
Joo - Niche Multi-Purpose HTML Template
Restaurant 01
View more
Joo - Niche Multi-Purpose HTML Template active
Wedding Planner
Joo - Niche Multi-Purpose HTML Template
Logistics Cargo 02
View more
Joo - Niche Multi-Purpose HTML Template
Creative 02
View more
Joo - Niche Multi-Purpose HTML Template
Bridal Dresses
View more
Joo - Niche Multi-Purpose HTML Template
Coming Soon
View more
Joo - Niche Multi-Purpose HTML Template
Creative 03
View more