Column Sizes | Bulma: Free, Open Source, And Modern CSS ...

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 sizes

Define the size of each column individually

If you want to change the size of a single column, you can use one of the following classes:

• is-three-quarters
• is-two-thirds
• is-half
• is-one-third
• is-one-quarter
• is-full

The other columns will fill up the remaining space automatically.

You can now use the following multiples of 20% as well:

• is-four-fifths
• is-three-fifths
• is-two-fifths
• is-one-fifth

is-full

is-four-fifths

Auto

Auto

is-three-quarters

Auto

Auto

is-two-thirds

Auto

Auto

is-three-fifths

Auto

Auto

is-half

Auto

Auto

is-two-fifths

Auto

Auto

is-one-third

Auto

Auto

is-one-quarter

Auto

Auto

is-one-fifth

Auto

Auto

<div class="columns"> <div class="column is-four-fifths">is-four-fifths</div> <div class="column">Auto</div> <div class="column">Auto</div> </div> <div class="columns"> <div class="column is-three-quarters">is-three-quarters</div> <div class="column">Auto</div> <div class="column">Auto</div> </div> <div class="columns"> <div class="column is-two-thirds">is-two-thirds</div> <div class="column">Auto</div> <div class="column">Auto</div> </div> <div class="columns"> <div class="column is-three-fifths">is-three-fifths</div> <div class="column">Auto</div> <div class="column">Auto</div> </div> <div class="columns"> <div class="column is-half">is-half</div> <div class="column">Auto</div> <div class="column">Auto</div> </div> <div class="columns"> <div class="column is-two-fifths">is-two-fifths</div> <div class="column">Auto</div> <div class="column">Auto</div> </div> <div class="columns"> <div class="column is-one-third">is-one-third</div> <div class="column">Auto</div> <div class="column">Auto</div> </div> <div class="columns"> <div class="column is-one-quarter">is-one-quarter</div> <div class="column">Auto</div> <div class="column">Auto</div> </div> <div class="columns"> <div class="column is-one-fifth">is-one-fifth</div> <div class="column">Auto</div> <div class="column">Auto</div> </div>

12 columns system #

As the grid can be divided into 12 columns, there are size classes for each division:

• is-1
• is-2
• is-3
• is-4
• is-5
• is-6
• is-7
• is-8
• is-9
• is-10
• is-11
• is-12

Naming convention

Each modifier class is named after how many columns you want out of 12. So if you want 7 columns out of 12, use is-7.

is-1

1

1

1

1

1

1

1

1

1

1

1

is-2

1

1

1

1

1

1

1

1

1

1

is-3

1

1

1

1

1

1

1

1

1

is-4

1

1

1

1

1

1

1

1

is-5

1

1

1

1

1

1

1

is-6

1

1

1

1

1

1

is-7

1

1

1

1

1

is-8

1

1

1

1

is-9

1

1

1

is-10

1

1

is-11

1

is-12

Offset #

While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use offset modifiers like .is-offset-x:

is-half is-offset-one-quarter

is-three-fifths is-offset-one-fifth

is-4 is-offset-8

is-11 is-offset-1

<div class="columns is-mobile"> <div class="column is-half is-offset-one-quarter"></div> </div> <div class="columns is-mobile"> <div class="column is-three-fifths is-offset-one-fifth"></div> </div> <div class="columns is-mobile"> <div class="column is-4 is-offset-8"></div> </div> <div class="columns is-mobile"> <div class="column is-11 is-offset-1"></div> </div>

Narrow column #

If you want a column to only take the space it needs, use the is-narrow modifier. The other column(s) will fill up the remaining space.

Narrow column

This column is only 200px wide.

Flexible column

This column will take up the remaining space available.

<div class="columns"> <div class="column is-narrow"> <div class="box" style="width: 200px"> <p class="title is-5">Narrow column</p> <p class="subtitle">This column is only 200px wide.</p> </div> </div> <div class="column"> <div class="box"> <p class="title is-5">Flexible column</p> <p class="subtitle"> This column will take up the remaining space available. </p> </div> </div> </div>

As for the size modifiers, you can have narrow columns for different breakpoints:

• .is-narrow-mobile
• .is-narrow-tablet
• .is-narrow-touch
• .is-narrow-desktop
• .is-narrow-widescreen
• .is-narrow-fullhd

← columns: Basics columns: Responsiveness →

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