How align columns in bootstrap-vue table?

Question

Using https://bootstrap-vue.js.org/docs/components/table in vue/cli / "bootstrap-vue": "^2.1.0" I did not find how to set align for all columns and change it for any column. I tried as:

<b-card-body>
        <b-table responsive="sm" striped hover small :items="users" :fields="usersFields" align-v="end">
            <template v-slot:cell(id)="data">
                <div class="-align-right">{{ data.value }}</div>
            </template>

            <template v-slot:cell(status)="data"  >
                <div class="-align-left">{{ getDictionaryLabel( data.value, userStatusLabels ) }}</div>
            </template>

But failed as all columns are centered.

How correctly ?

Answer 1

Class -align-right and -align-left are not valid Bootstrap v4 CSS class names. The Bootstrap text alignment classes are:

• text-right
• text-left
• text-center

See https://getbootstrap.com/docs/4.4/utilities/text/#text-alignment