Change font size for Bootstrap Table-CodePudding

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?

<!DOCTYPE html>
<html>
    <head>
        <!-- Bootstrap and Boostrap Table -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
        <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
    </head>
    <body >
        <div>
            <table id="btTable" class = "table-sm">
            <thead>
                <tr>
                    <th data-field="fieldA" data-sortable="true">Field A</th>
                    <th data-field="fieldB" data-sortable="true">Field B</th>
                    <th data-field="fieldC" data-sortable="true">Field C</th>
                </tr>
            </thead>
            </table>
        </div>
        <script defer>
            let data = [
                {
                    "fieldA": "purple",
                    "fieldB": "minivan",
                    "fieldC": 7,
                },
                {
                    "fieldA": "red",
                    "fieldB": "hatchback",
                    "fieldC": 26,
                }]
            var table = $("#btTable")
            $(function() {
                table.bootstrapTable({
                    data: data,
                    loadingFontSize: "30px"
                })
            })
        </script>
    </body>
</html>

CodePudding user response：

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;
}

    <head>
        <!-- Bootstrap and Boostrap Table -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
        <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
    </head>
    <body >
        <div>
            <table id="btTable" class = "table-sm">
            <thead>
                <tr>
                    <th data-field="fieldA" data-sortable="true">Field A</th>
                    <th data-field="fieldB" data-sortable="true">Field B</th>
                    <th data-field="fieldC" data-sortable="true">Field C</th>
                </tr>
            </thead>
            </table>
        </div>

    </body>

CodePudding user response：

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.

<!DOCTYPE html>
<html>
    <head>
        <!-- Bootstrap and Boostrap Table -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
        <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
    </head>
    <body >
        <div>
            <table id="btTable" class = "table-sm">
            <thead>
                <tr>
                    <th data-field="fieldA" data-sortable="true">Field A</th>
                    <th data-field="fieldB" data-sortable="true">Field B</th>
                    <th data-field="fieldC" data-sortable="true">Field C</th>
                </tr>
            </thead>
            </table>
        </div>
        <script defer>
            let data = [
                {
                    "fieldA": "purple",
                    "fieldB": "minivan",
                    "fieldC": 7,
                },
                {
                    "fieldA": "red",
                    "fieldB": "hatchback",
                    "fieldC": 26,
                }]
            var table = $("#btTable")
            $(function() {
                table.bootstrapTable({
                    data: data,
                    loadingFontSize: "60px"
                }).css('font-size', '30px')
            })
        </script>
    </body>
</html>