# Bulma v0.4.4: a modern CSS framework based on Flexbox
Bulma v0.4.4 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.

You are viewing the deprecated 0.4.4 version of the website. Click here to view the latest version

# Blog

Stay updated about new features, bug fixes, and releases

Subscribe

10 Mar 2017

## New field element (for better controls)

TL;DR: there’s a new `.field` container, and `.control` has been re-purposed.

Since the beginning, the `.control` has been a very versatile element that allowed:

- to space controls vertically
- to include an icon alongside inputs, buttons, textareas…
- to append a loading spinner
- to create horizontal forms
- to create control addons
- to create control groups

## The problem

The `.control` element acted as both a block container (for spacing, for other controls in a horizontal form), but also an inline container (for adding an icon, a loader, an addon, and grouping). It led to issues where you couldn’t:

- add a help text horizontally
- add multiple icons or loaders in a group of controls
- add a different icon on addons

## The solution

The new `.field` element becomes the block container for `.control` elements. As a result, it inherits the `.has-addons`, `.is-grouped`, and `.is-horizontal` modifiers.

Furthermore `.control` element can only contain a `.button`, `.input`, `.select`, or `.textarea`, and eventually a `.icon`. It can no longer contain a `.help` element or other `.control`.

But it allows more elaborate designs.

    // Before
    .control
      .has-addons
      .has-icon
      .is-grouped
      .is-horizontal
      .is-loading

    // After
    .control
      .has-icon
      .is-loading
    .field
      .has-addons
      .is-grouped
      .is-horizontal
    .field-label
    .field-body

    <!-- Before -->
    <label class="label">Username</label>
    <p class="control has-icon has-icon-right">
      <input class="input is-success" type="text" placeholder="Text input" value="bulma">
      <span class="icon is-small">
        <i class="fa fa-check"></i>
      </span>
      <span class="help is-success">This username is available</span>
    </p>

    <!-- After -->
    <div class="field">
      <label class="label">Username</label>
      <p class="control has-icon has-icon-right">
        <input class="input is-success" type="text" placeholder="Text input" value="bulma">
        <span class="icon is-small">
          <i class="fa fa-check"></i>
        </span>
      </p>
      <p class="help is-success">This username is available</p>
    </div>

## Examples

Addons with multiple icons or states.

Horizontal form with help text

From

This email is correct

11 Apr 2016

## Metro UI CSS grid with Bulma tiles

Have you ever wanted to build a Metro-UI-like grid in CSS? Thanks to Flexbox and the new Bulma tiles, you now can! And it only requires 1 HTML element: the `tile` element.

Check out the documentation!

09 Feb 2016

## Blog launched, new responsive columns, new helpers

First blog post on the newly launched blog! It even has its own RSS feed for those who still use that. This blog will be more frequently updated than the newsletter, so you can subscribe to either or both, as they will be used for different purposes.

### Columns on mobile too

By default, columns are only activated on tablet and desktop. If you want to use columns on mobile too, add the `is-mobile` modifier on the `columns` container.

    <div class="columns is-mobile">
      <div class="column"></div>
      <div class="column"></div>
      <div class="column"></div>
      <!-- etc. -->
    </div>

### Responsive columns

You can now apply different column size for each breakpoint.

For example, let’s say you want a column to take half the width on mobile, a third on tablet, and a quarter on desktop:

`is-half-mobile`
`is-one-third-tablet`
`is-one-quarter-desktop`

1

1

1

1

    <div class="columns is-mobile">
      <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop"></div>
      <!-- Other columns -->
    </div>

Info
If you use mobile modifiers on single `column` elements, make sure to use the `is-mobile` modifier on the `columns` container.

### Multiline columns

By default, if you want to start a new row, you just need to close a `columns` container and open a new one.

But you can also add the `is-multiline` modifier on the `columns` container, and use column size modifiers (like `is-half` or `is-3`) to define size on multiple rows within the same container.

`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"></div>
      <div class="column is-one-quarter"></div>
      <div class="column is-one-quarter"></div>
      <div class="column is-one-quarter"></div>
      <div class="column is-half"></div>
      <div class="column is-one-quarter"></div>
      <div class="column is-one-quarter"></div>
      <div class="column is-one-quarter"></div>
      <div class="column"></div>
    </div>

### Helpers section

While modifiers are specific to each Bulma element, helpers are general utility classes that can be applied on almost any element. Check out the new helpers documentation!

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!