Column options

Design different types of column layouts

Vertical alignment #

To align your columns vertically, add the is-vcentered modifier to the columns container.

First column

Second column with more content. This is so you can see the vertical alignment.

<div class="columns is-vcentered">
    <div class="column is-8">
      <p class="bd-notification is-primary">First column</p>
    </div>
    <div class="column">
      <p class="bd-notification is-primary">Second column with more content. This is so you can see the vertical alignment.</p>
    </div>
  </div>

Multiline #

Whenever you want to start a new line, you can close a columns container and start a new one. But you can also add the is-multiline modifier and add more column elements than would fit in a single row.

is-one-quarter

is-one-quarter

is-one-quarter

is-one-quarter

is-half

is-one-quarter

is-one-quarter

is-one-quarter

Auto

<div class="columns is-multiline is-mobile">
    <div class="column is-one-quarter">
      <code>is-one-quarter</code>
    </div>
    <div class="column is-one-quarter">
      <code>is-one-quarter</code>
    </div>
    <div class="column is-one-quarter">
      <code>is-one-quarter</code>
    </div>
    <div class="column is-one-quarter">
      <code>is-one-quarter</code>
    </div>
    <div class="column is-half">
      <code>is-half</code>
    </div>
    <div class="column is-one-quarter">
      <code>is-one-quarter</code>
    </div>
    <div class="column is-one-quarter">
      <code>is-one-quarter</code>
    </div>
    <div class="column is-one-quarter">
      <code>is-one-quarter</code>
    </div>
    <div class="column">
      Auto
    </div>
  </div>

Centering columns #

While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use .is-centered on the parent .columns element:

is-half

<div class="columns is-mobile is-centered">
    <div class="column is-half">
      <p class="bd-notification is-primary">
        <code class="html">is-half</code><br>
      </p>
    </div>
  </div>

Use with .is-multiline to create a flexible, centered list (try resizing to see centering in different viewport sizes):

is-narrow
First Column

is-narrow
Our Second Column

is-narrow
Third Column

is-narrow
The Fourth Column

is-narrow
Fifth Column

<div class="columns is-mobile is-multiline is-centered">
    <div class="column is-narrow">
      <p class="bd-notification is-primary">
        <code class="html">is-narrow</code><br>
        First Column
      </p>
    </div>
    <div class="column is-narrow">
      <p class="bd-notification is-primary">
        <code class="html">is-narrow</code><br>
        Our Second Column
      </p>
    </div>
    <div class="column is-narrow">
      <p class="bd-notification is-primary">
        <code class="html">is-narrow</code><br>
        Third Column
      </p>
    </div>
    <div class="column is-narrow">
      <p class="bd-notification is-primary">
        <code class="html">is-narrow</code><br>
        The Fourth Column
      </p>
    </div>
    <div class="column is-narrow">
      <p class="bd-notification is-primary">
        <code class="html">is-narrow</code><br>
        Fifth Column
      </p>
    </div>
  </div>

返回头部

问题反馈
返回顶部