CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Ryan
Ryan

Reputation: 1432

Cannot override bootstrap font-size

I've tried everything short of !important. No matter where I try to change the font-size of the text retrieved from my AJAX request, I go to the dev console, and it shows my font-size CSS crossed out and Bootstrap's as active. I've placed the font-size property in every conceivable location, including inline, however, the story remains the same: When the page loads, I see default text in a 90px font, but when I hit the button to retrieve text from the remote server, I get Bootstrap's font size, which is usually around 14px. Below, you can see many of my failed/redundant attempts to overcome this issue. Any thoughts?

<!DOCTYPE html>

<html lang="en">

        <!-- Bootstrap Links & Google Font Links-- Placement At Top Works Better in IDE used for Development -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Great+Vibes">
        <!-- style -->
        <style>
            body {
                font-family: Great Vibes, serif;
                background-color: #8A2BE2;
                font-size: 90px;
                color: #FFFFFF;
            }

            #display {
                background-color: #000000;
                color: #FFFFFF;
                font-size: 90px;
                min-height: 50%;
                min-height: 50vh;
                margin: 100px 200px 100px 200px;
                align-items: center;
            }

            /* word-wrap added to ensure quote remains in container */
            .quote-formatting {
                font-family: Great Vibes, serif;
                font-size: 90px;
                word-wrap: break-word;
            }

            #bootstrap-font-override {
                font-size: 90px;
            }

        </style>
        <script>
            $(document).ready(function () {

                $("#getQuote").on("click", function () {

                        $.ajax({
                            crossDomain: true,
                            dataType: "jsonp",
                            url:"https://api.forismatic.com/api/1.0/",
                            // appended to url in GET request as specified by API docs
                            jsonp: "jsonp",
                            data: {
                                method: "getQuote",
                                format: "jsonp",
                                lang: "en"
                            },
                            // take contents of JSON file from API and update html
                            success: function (json) {
                                var html = "";
                                html += '<h3>"' + json.quoteText + '"</h3>';
                                html += '<h5> -' + json.quoteAuthor + '</h5>';
                                $(".json-text").html(html);
                            },
                            // display when ajax request doesn't quite work out
                            error: function () {
                                alert("error!");
                            }

                        });
                    });
                });
        </script>
    </head>
    <body id="bootstrap-font-override">
        <div id="container-top" class="vertical-align container">
        <div class="container text-center">
            <h1>Heading</h1>
        </div>
            <div id="display" class="row">
                <div id="bootstrap-font-override" class="col-md-12 quote-formatting text-center">
                    <div style="font-size: 90px" id="bootstrap-font-override" class="json-text">Replace text on button click</div>
                </div>
            </div>
        </div> <!-- container-top -->
        <div id="container-btm" class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <button id="getQuote" class="btn btn-default">Get Quote</button>
                </div>
            </div>
        </div> <!-- container-btm -->
    </body>
</html>

Upvotes: 2

Views: 3156

Answers (2)

EVGENY GLUKHOV
EVGENY GLUKHOV

Reputation: 106

You need to override to h3 and h5 tags

Upvotes: 1

Robert Wade
Robert Wade

Reputation: 5003

The font style is being applied to the h3 that you're wrapping around your response, not the container. You're trying to apply styles to the container however. Those attempts won't override the h3 styles.

You need to target the h3:

#bootstrap-font-override h3 {
    font-size: 90px;
}


// pass in $ as argument to clear subsequent errors when using $; this is a clound9 IDE issue.
            $(document).ready(function () {

                $("#getQuote").on("click", function () {

                        $.ajax({
                            crossDomain: true,
                            dataType: "jsonp",
                            url:"https://api.forismatic.com/api/1.0/",
                            // appended to url in GET request as specified by API docs
                            jsonp: "jsonp",
                            data: {
                                method: "getQuote",
                                format: "jsonp",
                                lang: "en"
                            },
                            // take contents of JSON file from API and update html
                            success: function (json) {
                                var html = "";
                                html += '<h3>"' + json.quoteText + '"</h3>';
                                html += '<h5> -' + json.quoteAuthor + '</h5>';
                                $(".json-text").html(html);
                            },
                            // display when ajax request doesn't quite work out
                            error: function () {
                                alert("error!");
                            }

                        });
                    });
                });
           body {

                font-family: Great Vibes, serif;
                background-color: #8A2BE2;
                font-size: 90px;
                color: #FFFFFF;

            }

            #display {
                background-color: #000000;
                color: #FFFFFF;
                font-size: 90px;
                min-height: 50%;
                min-height: 50vh;
                margin: 100px 200px 100px 200px;
                align-items: center;
            }

            /* word-wrap added to ensure quote remains in container */
            .quote-formatting {
                font-family: Great Vibes, serif;
                font-size: 90px;
                word-wrap: break-word;
            }

            #bootstrap-font-override h3 {
                font-size: 90px;
            }
<html lang="en">

        <!-- Bootstrap Links & Google Font Links-- Placement At Top Works Better in IDE used for Development -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Great+Vibes">
        <!-- style -->
        
            
        <div id="container-top" class="vertical-align container">
        <div class="container text-center">
            <h1>Heading</h1>
        </div>
            <div id="display" class="row">
                <div id="bootstrap-font-override" class="col-md-12 quote-formatting text-center">
                    <div id="bootstrap-font-override" class="json-text">Replace text on button click</div>
                </div>
            </div>
        </div> <!-- container-top -->
        <div id="container-btm" class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <button id="getQuote" class="btn btn-default">Get Quote</button>
                </div>
            </div>
        </div> <!-- container-btm -->

Upvotes: 1

Related Questions