# 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

Documentation

Everything you need to create a website with Bulma

# Input

## The text input and its variations

The following modifiers are supported:

- the color
- the size
- the state

The following type attributes are supported:

- `type="text"`
- `type="password"`
- `type="email"`
- `type="tel"`

    <input class="input" type="text" placeholder="Text input">

### Colors

    <div class="field">
      <div class="control">
        <input class="input is-primary" type="text" placeholder="Primary input">
      </div>
    </div>
    <div class="field">
      <div class="control">
        <input class="input is-info" type="text" placeholder="Info input">
      </div>
    </div>
    <div class="field">
      <div class="control">
        <input class="input is-success" type="text" placeholder="Success input">
      </div>
    </div>
    <div class="field">
      <div class="control">
        <input class="input is-warning" type="text" placeholder="Warning input">
      </div>
    </div>
    <div class="field">
      <div class="control">
        <input class="input is-danger" type="text" placeholder="Danger input">
      </div>
    </div>

### Sizes

    <div class="field">
      <div class="control">
        <input class="input is-small" type="text" placeholder="Small input">
      </div>
    </div>
    <div class="field">
      <div class="control">
        <input class="input" type="text" placeholder="Normal input">
      </div>
    </div>
    <div class="field">
      <div class="control">
        <input class="input is-medium" type="text" placeholder="Medium input">
      </div>
    </div>
    <div class="field">
      <div class="control">
        <input class="input is-large" type="text" placeholder="Large input">
      </div>
    </div>

### States

#### Normal

    <div class="control">
      <input class="input" type="text" placeholder="Normal input">
    </div>

#### Hover

    <div class="control">
      <input class="input is-hovered" type="text" placeholder="Hovered input">
    </div>

#### Focus

    <div class="control">
      <input class="input is-focused" type="text" placeholder="Focused input">
    </div>

#### Loading

    <div class="control is-loading">
      <input class="input" type="text" placeholder="Loading input">
    </div>

New! 0.4.3

You can resize the loading spinner by appending `is-small`, `is-medium` or `is-large` to the `control` container.

    <div class="field">
      <div class="control is-small is-loading">
        <input class="input is-small" type="text" placeholder="Small loading input">
      </div>
    </div>
    <div class="field">
      <div class="control is-loading">
        <input class="input" type="text" placeholder="Normal loading input">
      </div>
    </div>
    <div class="field">
      <div class="control is-medium is-loading">
        <input class="input is-medium" type="text" placeholder="Medium loading input">
      </div>
    </div>
    <div class="field">
      <div class="control is-large is-loading">
        <input class="input is-large" type="text" placeholder="Large loading input">
      </div>
    </div>

#### Disabled

    <div class="control">
      <input class="input" type="text" placeholder="Disabled input" disabled>
    </div>

### With icons

You can append one of 2 modifiers on a control:

- `has-icons-left`
- and/or `has-icons-right`

You also need to add a modifier on the icon:

- `icon is-left` if `has-icons-left` is used
- `icon is-right` if `has-icons-right` is used

The size of the input will define the size of the icon container.

    <div class="field">
      <p class="control has-icons-left has-icons-right">
        <input class="input" type="email" placeholder="Email">
        <span class="icon is-small is-left">
          <i class="fa fa-envelope"></i>
        </span>
        <span class="icon is-small is-right">
          <i class="fa fa-check"></i>
        </span>
      </p>
    </div>
    <div class="field">
      <p class="control has-icons-left">
        <input class="input" type="password" placeholder="Password">
        <span class="icon is-small is-left">
          <i class="fa fa-lock"></i>
        </span>
      </p>
    </div>

If the control contains an icon, Bulma will make sure the icon remains centered, no matter the size of the input or of the icon.

    <div class="control has-icons-left has-icons-right">
      <input class="input is-small" type="email" placeholder="Email">
      <span class="icon is-small is-left">
        <i class="fa fa-envelope"></i>
      </span>
      <span class="icon is-small is-right">
        <i class="fa fa-check"></i>
      </span>
    </div>

    <div class="control has-icons-left has-icons-right">
      <input class="input" type="email" placeholder="Email">
      <span class="icon is-small is-left">
        <i class="fa fa-envelope"></i>
      </span>
      <span class="icon is-small is-right">
        <i class="fa fa-check"></i>
      </span>
    </div>

    <div class="control has-icons-left has-icons-right">
      <input class="input is-medium" type="email" placeholder="Email">
      <span class="icon is-left">
        <i class="fa fa-envelope"></i>
      </span>
      <span class="icon is-right">
        <i class="fa fa-check"></i>
      </span>
    </div>

    <div class="control has-icons-left has-icons-right">
      <input class="input is-large" type="email" placeholder="Email">
      <span class="icon is-medium is-left">
        <i class="fa fa-envelope"></i>
      </span>
      <span class="icon is-medium is-right">
        <i class="fa fa-check"></i>
      </span>
    </div>

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!