How to remove (Click to sort Ascending) text from header of every column in this bootstrap-vue table?

Question

I have a bootstrap-vue table that looks like this;

Here is the code;

<template>
  <div class="container">
    <h1 class="pt-2 pb-3">Bootstrap Table</h1>    
    <b-table striped hover :items="items" :fields="fields" primary-key></b-table>
  </div>
</template>

<script>
export default {
  data() {
    return {      
      "fields": [
        {
          "key": "first_name",
          "label": "My First Name",
          "sortable": true,
        },
        {
          "key": "last_name",
          "label": "My Last Name",
          "sortable": true,
        },
        {
          "key": "age",
          "label": "Age",
          "sortable": true,
          "sortByFormatted": false,           
        },        
      ],
      "items": [
        { "age": -40, "first_name": "Dickerson", "last_name": "Macdonald"},
        { "age": 21, "first_name": "Larsen", "last_name": "Shaw" },
        { "age": 89, "first_name": "Geneva", "last_name": "Wilson" },
        { "age": 38, "first_name": "Jami", "last_name": "Carney" }
      ]
    };
  }
};
</script>

I want to remove the (Click to sort Ascending) text that appears in the header of every column.

I am puzzled why this text appears when it does not appear anywhere in the code.

I am using vue v2.6

Answer 1

Have you imported Bootstrap CSS files in your app entry point? Bootstrap uses the .sr-only class to hide that text and show it just on screen readers.

Look at the "Using module bundlers" section https://bootstrap-vue.org/docs