How align columns in bootstrap-vue table?

2
votes

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 ?

2
bootstrap-vue

2 Answers

8
votes

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

1
votes

The way I like most is setting in the field options:

usersFields: [
  {
    key: 'id',
    label: 'ID',
    thClass: 'text-right',
    tdClass: 'text-right',
  },
  {
    key: 'status',
    label: 'Status',
    thClass: 'text-left',
    tdClass: 'text-left',
  },
]