CODEWITHSUNDEEP
javascripthtmlbootstrap-4bootstrap-table
Chris
Chris

Reputation: 1475

Change font size for Bootstrap Table

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 class="home">
        <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>

Upvotes: 2

Views: 4168

Answers (2)

Maik Lowrey
Maik Lowrey

Reputation: 17566

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 class="home">
        <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>

Upvotes: 1

ravi singh
ravi singh

Reputation: 29

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 class="home">
        <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>

Upvotes: 0

Related Questions