How can I make a bulma button goes full width?

Question

I am using bulma@0.3.0 css framework

I have submit button within a form as follows

...
<!--Submit button-->
<div class="columns">
    <div class="column is-full">
        <button type="submit" class="button is-primary">
            <span class="icon"><i class="fa fa-sign-in"></i></span>
            <span>Login</span>
        </button>
    </div>
</div>
...

The result is the following

How can I make the button goes full-width ?

I think is-fullwidth is the class you are looking for – Manu Obre Jan 06 '17 at 12:57 — Manu Obre, Jan 06 '17 at 12:57
@ManuelObregozo that is correct, thank you – ira Jan 06 '17 at 12:59 — ira, Jan 06 '17 at 12:59

score 85 · Accepted Answer · answered Jan 06 '17 at 13:00

85

Add the class is-fullwidth

<button type="submit" class="button is-primary is-fullwidth">
      <span class="icon"><i class="fa fa-sign-in"></i></span>
      <span>Login</span>
</button>

answered Jan 06 '17 at 13:00

Manu Obre

2,254
1
12
12

score 2 · Answer 2 · edited Oct 31 '19 at 02:39

2

is-fullwidth did not work for me, but is-overlay did!

edited Oct 31 '19 at 02:39

Samuel Liew

76,741
107
159
260

answered Oct 04 '18 at 06:59

Pauls Bebris

399
4
6

4

that sounds like a different thing. – Ashnur Nov 14 '18 at 15:46
The same happened to me. removing `is-grouped` from the parent of the `.is-fullwidth` fixed it for me. – JonTroncoso Jun 02 '19 at 04:35

How can I make a bulma button goes full width?

2 Answers2