Column

You can add columns to your grid row using the class column, and wrapp all columns in a columns. By default, you do not have to specify the size of the column: each column will have by default an equal width, proportional to the number of columns you have added.

<div class="columns has-text-center">
    <div class="column">
        <div class="is-rounded has-bg-primary has-text-white has-p-2">Column 1</div>
    </div>
    <div class="column">
        <div class="is-rounded has-bg-primary has-text-white has-p-2">Column 2</div>
    </div>
    <div class="column">
        <div class="is-rounded has-bg-primary has-text-white has-p-2">Column 3</div>
    </div>
</div>

To customize the width of each column, we provide the following modifiers:

Example:

<div class="columns has-text-center">
    <div class="column is-two-thirds">
        <div class="is-rounded has-bg-primary has-text-white has-p-2">2/3</div>
    </div>
    <div class="column is-one-third">
        <div class="is-rounded has-bg-primary has-text-white has-p-2">1/3</div>
    </div>
</div>

You can also apply these variants in different breakpoints to customize the column behavior across different devices and screen sizes.

You can combine different column classes to specify how the grid will be displayed on different devices. For example, if you create a grid with two columns and add the class is-half and is-full-mobile, your grid will have two columns on tablet screens and up, and one column on mobile devices.

<div class="columns has-text-center">
    <div class="column is-half is-full-mobile">Column</div>
    <div class="column is-half is-full-mobile">Column</div>
</div>

You can hide a column at a specific breakpoint using the responsive is-hidden helper.

<div class="columns">
    <div class="column is-one-third is-hidden-mobile">
        Hidden on mobile
    </div>
    <div class="column is-two-thirds is-full-mobile">
        Always visible
    </div>
</div>

Customize

The column element will apply the styles defined in the layout.column field of your theme configuration.

export default {
    layout: {
        column: {
            paddingTop: "0.75rem",
            paddingBottom: "0.75rem",
        },
    },
    // ...other configuration
};