Bulma: Buttons: request: a way to align text contents within the button

[mkstix6]

This is about Bulma button elements as per : https://bulma.io/documentation/elements/button/

Feature request

Overview of the problem

I would like to be able to be able to _align the text within buttons, to the left or right_.

Expected behavior

Buttons would have a documented method to align the contents of the button.
Suggestion: Perhaps, buttons could respond to the helper/modifier CSS classes .has-text-left and .has-text-right.

Actual behavior

Button text can't be aligned using the normal text align helper classes because the text is also centered using flexbox justify-content — at least, not in any documented way that I have found (apologies if I missed it somewhere).

[Lawzy93]

If you add the following CSS, you should be able to make it work.

.button.has-text-left {
    justify-content: flex-start;

}

.button.has-text-right {
    justify-content: flex-end;
}

_DISCLAIMER: I have not fully tested this, and it may break other aspects_

[jgthms]

You can use buttons is-right:

<nav class="buttons is-right">
  <a class="button">One</a>
  <a class="button">Two</a>
  <a class="button">Three</a>
</nav>

[Lawzy93]

buttons is-right will align the group of buttons to the right.
It will not, however align the text inside a button to the right.

Ideally, the typography modifier has-text-right would do this, however it does not currently effect flex items.

[mkstix6]

Thanks @Lawzy93 I ended up making a quick helper class much like you suggested but specifically targeting the flexbox alignment. I just thought I'd steer clear of modifying the bulma classes for now.

.justify-content-start {
  justify-content: flex-start;
}