How do I create a series of rows where a button is right aligned in css using Bulma?

Question

I'm using Bulma (and Buefy with Vue) and I've got a panel with a series of items defined like this:

<template>
  <div v-if="user">
    <nav class="panel">
      <p class="panel-heading">
        Cities
      </p>
      <div class="panel-block" v-for="c in user.cities">
        <div class="is-pulled-left">{{c}}</div>
        <div class="is-pulled-right"><fai class="has-text-danger" icon="minus-circle"></fai></div>
      </div>
    </nav>
  </div>
</template>

That looks like this:

How do I get it so the buttons are aligned on the right, not the left?

Answer 1

2021 Update: Newer versions of bluma have their flex box helpers. You can just add a single class to our panel-block to achieve this effect. Use is-justify-content-space-between like so:

<div class="panel-block is-justify-content-space-between" v-for="c in user.cities">
  <div class="is-pulled-left">{{c}}</div>
  <div class="is-pulled-right"><fai class="has-text-danger" icon="minus-circle"></fai></div>
</div>

---

Use justify-content: flex-end

Just by inspecting the html, we can see that the Bulma class panel-block applies a justify-content: flex-start to all it's child elements. This means that even if you apply is-pulled-right to the inner divs, everything will always be positioned left. Applying justify-content: flex-end to the outer parent container will force everything to the right. So, in short, you can override some of Bulma's default styling to get what you want.

.end {
  justify-content: flex-end !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />

<div>
  <nav class="panel">
    <p class="panel-heading">
      Cities
    </p>
    <div class="panel-block end">
      <div class="">New York</div>
    </div>
    <div class="panel-block end">
      <div class="">London</div>
    </div>
    <div class="panel-block end">
      <div class="">Paris</div>
    </div>
  </nav>
</div>