How to resize an input field with Bulma in Vue.js

Question

I am trying to resize the input field with Bulma. However, the input field stretches out across the entire screen width. Instead, I would like to center the user input with a width of say a quarter screen width.

Whatever size I enter in a div class, doesn't do anything, ie

<div class="is-size-3" >

or,

<input
                 class="input is-small"
                 size="5"
                  type="text"
                  v-model="enteredTask"
                  placeholder="name"
                />

Would appreciate any advice. This is what I have: Thanks

<template>
  <section>
    <form >
      <div class="is-size-3" >
        <div class="has-text-centered">
          <h1 class="title is-3">User registration</h1>
          <form class="box">
            <div class="field">
              <label class="label">Username</label>
              <div class="control">
                <input
                 class="input is-small"
                 size="5"
                  type="text"
                  v-model="enteredTask"
                  placeholder="name"
                />
                <!-- @keyup.enter="enterUser" -->
              </div>
            </div>
            <button class="button is-primary" @click="enterUser">OK</button>
            <p v-if="enteredTask.length > 10">input is too long.</p>
          </form>
        </div>
      </div>
    </form>
  </section>
</template>

Answer 1

Use the column system of bulma: https://bulma.io/documentation/columns/basics/

You could do something like this:

<div class="columns">
  <div class="column is-4 is-offset-4">
    <div class="field">
      <div class="control">
        <input class="input" type="text" />
      </div>
    </div>
  </div>
</div>