Bulma Columns

admin

7 years ago

Bulma Columns– Bulma Css provides simple classes to create responsive columns. It is very easy to create responsive columns in Bulma. Here in this article we are going to explain how you can column container and column class to create responsive columns. You can also use our online editor to edit and run the code online.

Bulma Columns

This Article contains the following topics-

Basics
Sizes
Responsiveness
Nesting
Gap
Options

1. Basics

To create column layout you need to create column container and then add as many container as you want. Here is simple example of column layout.

Bulma Columns Example:

<div class="columns">
  <div class="column">
    Column 1
  </div>
  <div class="column">
    Column 2
  </div>
  <div class="column">
    Column 3
  </div>
  <div class="column">
    Column 4
  </div>
</div>

Try it »

If you run the above example it will produce output something like this-

You can as many columns you want there is no limitation on it, Bulma will automatically handle the columns on all devices.

2. Sizes

There are various classes available that we can use to change the size of column.

is-three-quarters
is-two-thirds
is-half
is-one-third
is-one-quarter
is-four-fifths
is-three-fifths
is-two-fifths
is-one-fifth

The columns will occupy the space as class name example -is-half ie. half width of the container. Other columns will automatically manage and adjust in remaining space.

Let us create simple example to understand the above classes.

Change Column Size Classes Example:

  <div class="columns">
 <div class="column is-four-fifths amp-wp-inline-946849c0979ce96d9dfcc0062d8cd761">is-four-fifths</div>
<div class="column amp-wp-inline-8d242d44713496ef132d3f1235ed49a9">Auto</div>
<div class="column amp-wp-inline-8d242d44713496ef132d3f1235ed49a9">Auto</div>
					</div>					
<div class="columns">
<div class="column is-three-quarters amp-wp-inline-946849c0979ce96d9dfcc0062d8cd761">is-three-quarters</div>
<div class="column amp-wp-inline-8d242d44713496ef132d3f1235ed49a9">Auto</div>
<div class="column amp-wp-inline-8d242d44713496ef132d3f1235ed49a9">Auto</div>
</div>
					
<div class="columns">
<div class="column is-two-thirds amp-wp-inline-946849c0979ce96d9dfcc0062d8cd761">is-two-thirds</div>
<div class="column amp-wp-inline-8d242d44713496ef132d3f1235ed49a9">Auto</div>
<div class="column amp-wp-inline-8d242d44713496ef132d3f1235ed49a9">Auto</div>
</div>

Try it »

If you run the above example it will produce output something like this-

12 Columns Grid System

Bulma Also provides classes to create 12 column grid system. Following classes are available to create grid.

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

Now let us create simple example to understand the grid system.

12 Columns Grid Example:

 <div class="columns">
					  <div class="column is-2 amp-wp-inline-946849c0979ce96d9dfcc0062d8cd761">is-2</div>
					  <div class="column amp-wp-inline-8d242d44713496ef132d3f1235ed49a9">Auto</div>
					</div>
					<div class="columns">
					  <div class="column is-3 amp-wp-inline-946849c0979ce96d9dfcc0062d8cd761">is-3</div>
					  <div class="column amp-wp-inline-8d242d44713496ef132d3f1235ed49a9">Auto</div>
					</div>	
					<div class="columns">
					  <div class="column is-4 amp-wp-inline-946849c0979ce96d9dfcc0062d8cd761">is-4</div>
					  <div class="column amp-wp-inline-8d242d44713496ef132d3f1235ed49a9">Auto</div>
					</div>
					<div class="columns">
					  <div class="column is-5 amp-wp-inline-946849c0979ce96d9dfcc0062d8cd761">is-5</div>
					  <div class="column amp-wp-inline-8d242d44713496ef132d3f1235ed49a9">Auto</div>
					</div>
					<div class="columns">
					  <div class="column is-6 amp-wp-inline-946849c0979ce96d9dfcc0062d8cd761">is-6</div>
					  <div class="column amp-wp-inline-8d242d44713496ef132d3f1235ed49a9">Auto</div>
					</div>
					<div class="columns">
					  <div class="column is-7 amp-wp-inline-946849c0979ce96d9dfcc0062d8cd761">is-7</div>
					  <div class="column amp-wp-inline-8d242d44713496ef132d3f1235ed49a9">Auto</div>
					</div>
					<div class="columns">
					  <div class="column is-8 amp-wp-inline-946849c0979ce96d9dfcc0062d8cd761">is-8</div>
					  <div class="column amp-wp-inline-8d242d44713496ef132d3f1235ed49a9">Auto</div>
					</div>
					<div class="columns">
					  <div class="column is-9 amp-wp-inline-946849c0979ce96d9dfcc0062d8cd761">is-9</div>
					  <div class="column amp-wp-inline-8d242d44713496ef132d3f1235ed49a9">Auto</div>
					</div>
					<div class="columns">
					  <div class="column is-10 amp-wp-inline-946849c0979ce96d9dfcc0062d8cd761">is-10</div>
					  <div class="column amp-wp-inline-8d242d44713496ef132d3f1235ed49a9">Auto</div>
					</div>
					<div class="columns">
					  <div class="column is-11 amp-wp-inline-946849c0979ce96d9dfcc0062d8cd761">is-11</div>
					  <div class="column amp-wp-inline-8d242d44713496ef132d3f1235ed49a9">Auto</div>
					</div>

Try it »

If you run the above example it will produce output something like this-

Offset

You can use offset classes to add offset to the columns.

is-offset-x – Where x is number for example – is-offset-2, is-offset-3, is-offset-8, is-offset-11 etc.
is-offset-one-fifth
is-offset-one-quarter
is-offset-one-quarter

Column Offset Example:

<div class="columns">
  <div class="column is-11 is-offset-1"></div>
</div>

Narrow Columns

If want to create a column to occupy the space that it really needs, use is-narrow modifier class.

Narrow Column Example:

<div class="columns">
  <div class="column is-narrow">
    <div class="box amp-wp-inline-86c26e8f1b8d62a181ac3582f80530d9">
      <p class="title is-5">Narrow column</p>
      <p class="subtitle"> 250px wide column.</p>
    </div>
  </div>
  <div class="column">
    <div class="box">
      <p class="title is-5">Flexible column</p>
      <p class="subtitle">This will cover the remaining space.</p>
    </div>
  </div>
</div>

Following Narrow Modifiers are available-

is-narrow-mobile
is-narrow-tablet
is-narrow-desktop

Responsiveness

There are some classes that can be used to handle the responsiveness of the application.

Mobile Columns

By default columns on mobile devices are stacked on each other. To work columns on mobile add the class is-mobile.

Mobile Columns Example:

<div class="columns is-mobile">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

Now the above columns will work on mobile devices also.

Desktop Columns

If you want columns to work on desktop upwards use is-desktop class.

Desktop Columns Example:

<div class="columns is-desktop">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

3. Nesting Columns

We can create nested columns by adding column container and columns inside another column.

Nested Columns Example:

<div class="column">
        <p>First column</p>
        <div class="columns is-mobile">
          <div class="column amp-wp-inline-141eae0e273662b6eeb49ac6044cb4c0">
            <p class="">1st nested column</p>
          </div>
          <div class="column amp-wp-inline-5e1af81432b1093c9e8d66249b105b72">
            <p>2nd nested column</p>
          </div>
        </div>
</div>

Gap

Bulma provides classes to manage the gaps between the columns.

Default Gap

By default columns have gap with 0.75rem on each side hence gap between two columns is 1.5rem.

Gapless Columns

We can remove the column gaps using modifier class is-gapless.

Remove Space Between Columns Example:

<div class="columns is-gapless">
  <div class="column">
    No gap
  </div>
  <div class="column">
    No gap
  </div>
</div>

is-multiline is used to combine the columns.

<div class="columns is-gapless is-multiline">
  <div class="column">
    No gap
  </div>
  <div class="column">
    No gap
  </div>
</div>

Variable Gap

If you want to add variable gaps, use the following classes-

is-0
is-1
is-2
is-3
is-4
is-5
is-6
is-7
is-8

Example

<div class="columns is-variavle is-5">
  <div class="column">
    No gap
  </div>
  <div class="column">
    No gap
  </div>
</div>

Note: Please Add is-variavle class to add the variable gap.

Column Options

Multiline

You can use is-multiline modifier to add more column elements that will fit in single row.

Centering Column

You can use the is-centered class to center align the columns in Bulma.

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

Bulma Tutorial

Bulma Installation

Bulma Modifiers

Bulma Columns

Bulma Layout

Bulma Tiles

Bulma Form

Bulma File Upload

Bulma Box