Buttons component inside a modal footer

[laginha87]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version 0.6.1
My browser is: Chrome

Description

I was trying to have a modal footer with buttons aligned to the right by using the buttons component inside a model-card-foot

Steps to Reproduce

1. Use this markup:

<div class="modal is-active">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      <!-- Content ... -->
    </section>
    <footer class="modal-card-foot">
      <div class='buttons is-right'>
          <button class="button is-success">Save changes</button>
          <button class="button">Cancel</button>
      </div>
    </footer>
  </div>
</div>

Js fiddle with the scenario: http://jsfiddle.net/6o5n3tqy/1/

Expected behavior

Actual behavior

I got it working by adding the buttons class to the modal-card-foot component like this:
http://jsfiddle.net/6o5n3tqy/2/

Not sure if that's the intended usecase, if so I can make a PR to add it to the docs either in the buttons section or the modal section.

[gaastonsr]

I would love this!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[rajasimon]

Also is there a way to position one button on the left and another one on the right?

[Deliaz]

@rajasimon #516 (comment)

[sshymko]

The following worked for me:

<footer className="modal-card-foot buttons is-right">
  <button class="button is-success">Save changes</button>
  <button class="button">Cancel</button>
</footer>