Bulma: how to make buttons the same size?

Question

I'm using Bulma css and would like to make buttons the same size. Currently, each button has different size depending on the button title.
The only options I'm finding is "is-fullwidth", but that's too big.

Anyone can help me?

Answer 1

Write as many column elements as you may need, inside a columns class element. Then put one button inside each column element with the is-fullwidth class.

 <div class="columns">
    <div class="column is-2">
       <button class="button is-outline is-primary is-fullwidth" id="acceptBtn">Ok</button>
    </div>
    <div class="column is-2">
       <button class="button is-outline is-secondary is-fullwidth ml-5" id="cancelBtn">Discard changes</button>
    </div>
 </div>

In this example I put only two buttons, but they can be as many as you need.

The column elements will set the width and the button class is-fullwidth will expand the button to the available width of its container.

If you want this solution with less verbose code, try this:

<div class="columns">
   <button class="button is-outline is-primary is-fullwidth column is-2" id="acceptBtn">Ok</button>
   <button class="button is-outline is-secondary is-fullwidth ml-5 column is-2" id="cancelBtn">Discard changes</button>
</div>

Adding the is-fullwidth column is-2 classes directly to a <button> is also valid.