Search code examples
cssbulma

Start columns at end of container with Bulma.io

I would like to know if there is a good way to start the columns of Bulma.io at the end of its container. The usual setup is:

<div class="container">
  <div class="columns">
    <div class="column">
      First
    </div>
    <div class="column">
      Second
    </div>
    <div class="column">
      Third
    </div>
  </div>
</div>

which spreads the columns evenly throughout the container.

-----------------------------------------------------
|               | |                | |              |
|               | |                | |              |
-----------------------------------------------------

I know it is possible to make them shorter and left-aligned with is-(size) classes. I would like to to the same but make the right-aligned so the following happens:

-----------------------------------------------------
|                      | |       | |       | |      |
|                      | |       | |       | |      |
-----------------------------------------------------

I have looked up the documentation but I couldn't find any built in way.

Solution

  • I'm afraid there's no built in way for .columns. For some reason .is-right class is only available for .tags, .buttons and some more. What you could do is to create and use your own utility/helper class:

    .columns.is-right {
  justify-content: flex-end;
}