You are viewing the deprecated 0.5.2 version of the website. Click here to view the latest version

Documentation

Everything you need to create a website with Bulma

# Nesting columns

## A simple way to build responsive columns

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.

This page is open source. Noticed a typo? Or something unclear? Improve this page on GitHub

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!