How to resize an input field with Bulma in Vue.js - 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>