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?
By default bootstrap sets the vertical-align: top for and elements.

Thanks

Answer 1

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'
]