Vue.js, bootstrap-vue, <b-table> element vertical align

Question

Hi I would like to align vertically element in my b-table inside my vue/bootstrap project.

My code:

<template>
  .....
  <b-table small :fields="fields" :items="items" responsive="sm">
    <template #cell(name)="data">
      <b class="text-dark">{{ data.value }}</b>
    </template>

    <template #cell(utility)="data">
      <b class="text-dark">{{ data.value }}</b>
    </template>

    <template #cell(icon)="data">
      <img v-bind:src="data.value" alt="...." width="50" height="50">
    </template>
  </b-table>
  .....
</template>

<script>
......
  data () {
    return {
      fields: ['name', 'utility', 'icon'],
      items: [
        { name: '.....', utility: '.....', icon: '/img/......a6c26916.png' },
        { name: '.....', utility: '.....', icon: '/img/......5233a552.png' },
        { name: '.....', utility: '.....', icon: '/img/......96e5850d.png' },
        { name: '.....', utility: '.....', icon: '/img/......41bab77c.png'}
      ]
    }
  }
......
</script>

How can I align vertically the "<b>...</b>" text?
I press F12 on the page and by default boostrap sets the vertical-align: top for th and td elements.
I've already tried to set both inline and in <style> the vertical-align: middle but it didn't work.
How can I change it?
Thanks

Hiws Hiws · Accepted Answer · 2021-03-27T14:32:10

You can apply classes to the rendered TD's by using the tdClass property in your field definitions. You can use this to apply the align-middle utility class, to center your text in the columns.

fields: [
  { key: 'name', tdClass: 'align-middle' }, 
  { key: 'utility', tdClass: 'align-middle' },
  'icon'
]

Vue.js, bootstrap-vue, <b-table> element vertical align

1 Answers