How can I make a bulma button goes full width?
Asked Answered
M

2

43

I am using [email protected] 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

enter image description here

How can I make the button goes full-width ?

Minister answered 6/1, 2017 at 12:51 Comment(2)
I think is-fullwidth is the class you are looking forLaspisa
@ManuelObregozo that is correct, thank youMinister
L
88

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>
Laspisa answered 6/1, 2017 at 13:0 Comment(0)
S
2

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

Suspire answered 4/10, 2018 at 6:59 Comment(2)
that sounds like a different thing.Spangler
The same happened to me. removing is-grouped from the parent of the .is-fullwidth fixed it for me.Tours

© 2022 - 2024 — McMap. All rights reserved.