Home » vue » BootstrapVue – table column label format

BootstrapVue – table column label format

Posted by: admin November 26, 2021 Leave a comment


Looking for assistance on formatting my table labels to display as it as defined in the code. Currently, the labels only Capitalize the first character of the word, and it ignores the rest. Any idea how to achieve the defined value as the label display? Currently IP Address is being displayed as Ip Address (notice the lowercase p in IP) when it renders in the HTML.

    .x-table {
        text-align: center;
        background-color: #f0f0f0;
        max-width: 20px;

        style="background-color: #FFFFFF; width: 100%; font-size: 8px !important;" 

    data: function () {
        return {
            fields: [
            { key: 'hostname', label: 'Hostname', tdClass: 'x-table', visible: true, stickyColumn: true},
            { key: 'ip_address', label: 'IP Address', tdClass: 'x-table', visible: true}


enter image description here


I’m assuming This is bootstrap-vue.

When creating the b-table you can pass the style object in thStyle property.

You can force the headers to be of normal style with text-transform: none;.

Read the documentation here: Bootstrap vue – b-table

Refer the "Field definition reference" section

Since this is not pure vue, make sure to add the proper tags so that you can reach a more relevant audience.