vue.js コンテンツを右寄せ、中央揃えにする

要素を右寄せにする

参考

bootstrap-vue-layout
https://bootstrap-vue.js.org/docs/components/layout/

Bootstrap4に用意されているクラス【flex編】
https://webnetamemo.com/coding/bootstrap4/201906138320

もう迷わない！CSS Flexboxの使い方を徹底解説
https://webdesign-trends.net/entry/8148

---

b-container

親要素に指定する
flexboxの親要素(container)として扱われる
container以下の要素は全て子要素(item)になる

d-flex

flexboxを使用するためのクラス

justify-content-end

子要素を右寄せにするためのクラス

some_component.vue

<b-container class="d-flex justify-content-end">
  hoge
</b-container>

これで要素を右寄せに出来る。

中央揃えの場合は

justifiy-content-center

を使用。