Change font size for Bootstrap Table

Question

I'm using the Bootstrap table functionality which is great but I cannot seem to change the font size.

I'm following the example at https://examples.bootstrap-table.com/index.html#options/loading-font-size.html#view-source but whatever I change the size to, it has no effect.

What am I doing wrong?

user_14807111 · Answer

You can make the styling by using plain javascript. I add only this in your javascript code:

            var tableStyle = document.querySelector('table');            
            tableStyle.classList.add('fs30');

And this css class:

.fs30 {
  font-size: 30px;
}

Then you have full control to change every element in you table.

          let data = [
                {
                    "fieldA": "purple",
                    "fieldB": "minivan",
                    "fieldC": 7,
                },
                {
                    "fieldA": "red",
                    "fieldB": "hatchback",
                    "fieldC": 26,
                }]
          
            var tableStyle = document.querySelector('table');            
            tableStyle.classList.add('fs30');
            var table = $("#btTable")
            $(function() {
                table.bootstrapTable({
                    data: data,                    
                })
            })

.fs30 {
  font-size: 30px;
}

user_10868896 · Answer

Correct it won't change the font size of your table content as you are trying to change the font size of Loading text. Try changing value of css font size like example below.

Change font size for Bootstrap Table

2 Answers