How align columns in bootstrap-vue table?
20,150
Solution 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
Solution 2
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',
},
]
Related videos on Youtube
Author by
mstdmstd
Updated on June 29, 2021Comments
-
mstdmstd almost 3 years
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 ?