Column Options | Bulma

Learn CSS with 🎓 online interactive courses,📺 educational videos, and 🧑🏻‍💻project-building tutorials.

Start Here

• Overview
• Installation
• Alternative Versions
• Syntax
• Modularity
• Responsiveness
• Migrating to v1

Features

• CSS Variables
• Themes
• Dark Mode
• Color Palettes
• Skeletons

Sass Tools

• Mixins
• Responsive mixins
• Form Control mixins
• Extends

Customization

• Concepts
• With Sass
• With Modular Sass
• With CSS Variables
• List of Sass variables

CSS Library

• Elements
  • Block
  • Box
  • Button
  • Content
  • Delete
  • Icon
  • Image
  • Notification
  • Progress bars
  • Table
  • Tag
  • Title
• Components
  • Breadcrumb
  • Card
  • Dropdown
  • Menu
  • Message
  • Modal
  • Navbar
  • Pagination
  • Panel
  • Tabs
• Form
  • General
  • Input
  • Textarea
  • Select
  • Checkbox
  • Radio
  • File
• Columns
  • Basics
  • Sizes
  • Responsiveness
  • Nesting
  • Gap
  • Options
• Grid
  • Smart Grid
  • Fixed Grid
  • Grid Cells
  • Playground
• Layout
  • Container
  • Hero
  • Section
  • Level
  • Media Object
  • Footer

CSS Helpers

• Color
• Color Palette
• Spacing
• Typography
• Visibility
• Flexbox
• Other

Sponsor

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>

← columns: Gap grid: Smart Grid →

How to support Bulma

One-time donation

Browser testing via

Visit our Sponsors

Monthly donation

Become a sponsor #native_company# #native_desc# #native_cta# Get started for Free Get started for Free