How to shorten bulma input?

Question

It is possible to shorten Bulma input width?

As I can see in their documentation there is a is-small parameter but it only makes the font and height smaller.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.2/css/bulma.css" integrity="sha256-8BrtNNtStED9syS9F+xXeP815KGv6ELiCfJFQmGi1Bg=" crossorigin="anonymous" />

<div class="container">
  <div class="control has-icons-left has-icons-right">
    <input class="input is-small m-r-5" type="text" placeholder="Exxxxx">
    <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>

As we can see on the following screenshot it is spread through the container:

I would like to shorten it from 100% width to about 33%

Therapeutic

Answer 1

Small workaround: use columns

<div class="container">
    <div class="columns">
      <div class="column is-one-fifth">
        <div class="control has-icons-left has-icons-right">
          <input class="input" type="text" placeholder="Exxxxx">
          <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>
    </div>
  </div>

Result:

Therapeutic

Answer 2

You can use the size property if the input is of type text, search, tel, url, email, and password. (e.g. doesn't work on type number).

 <input class="input is-small" size="5" type="text">

Contact

Answer 3

you can add style="width: 33%;" for input

<input class="input is-small m-r-5" type="text" style="width: 33%;" placeholder="Exxxxx">

Hypophosphite

Answer 4

You can add style="width: 33%" for the container class

<div class="container" style="width:33%">
<div class="control has-icons-left has-icons-right" style="width:33%">
    <input class="input is-small m-r-5" type="text" placeholder="Exxxxx">
    <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>

Downhearted