How to Change Bootstrap's Global Default Font Size

How to change Bootstrap's global default font size?

There are several ways but since you are using just the CSS version and not the SASS or LESS versions, your best bet to use Bootstraps own customization tool:

http://getbootstrap.com/customize/

Customize whatever you want on this page and then you can download a custom build with your own font sizes and anything else you want to change.

Altering the CSS file directly (or simply adding new CSS styles that override the Bootstrap CSS) is not recommended because other Bootstrap styles' values are derived from the base font size. For example:

https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss#L52

You can see that the base font size is used to calculate the sizes of the h1, h2, h3 etc. If you just changed the font size in the CSS (or added your own overriding font-size) all the other values that used the font size in calculations would no longer be proportionally accurate according to Bootstrap's design.

As I said, your best bet is to just use their own Customize tool. That is exactly what it's for.

If you are using SASS or LESS, you would change the font size in the variables file before compiling.

Why is bootstrap setting the default font-size to 10px?

In Bootstrap version 3.3.7 there is a style:

html {
  font-size: 10px;
   ...
}

Change to: (or whatever value you would like)

html {
    font-size: 100%;
    ...
}

How to switch the global font family and update $font-family-base in bootstrap

html,* {
font-family: '--apple-system','san-serif',
font-size:16px;
}

How can I change the size of the font in Bootstrap 4 with just CSS?

It depends how/where you're changing it. It should work fine. Make sure the custom CSS you're adding follows the bootstrap.css, and you shouldn't need to use !important

Demo: https://www.codeply.com/go/R9dGnr6AXn

Bootstrap 4: How Can I Set $font-size-base for Different Monitor Sizes using Responsive Font Sizing?

Everything is described in the RFS repository.

You set the biggest font size. It will be applied when the viewport is larger than 1200px. When the viewport is smaller, the font size is automatically rescaled. So, if you have the following code:

element { font-size: 20px; }

You have to replace it with:

element { font-size: font-size(20px); }

The implementation and default options can be found in the source code of RFS in bootstrap gem: link.

Then, you do not have to use $font-size-base, use $rfs-base-font-size instead.

Cant Overwrite font-size of bootstrap 5

Try this

a.navbar-brand {
  font-family: "Ubuntu";
  font-size:2.5rem;
  font-weight: bold;
  }

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
  <a class="navbar-brand" href="#">tindog</a>

Cannot override bootstrap font-size

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

How to change the font size with Sass in Bootstrap 4?

With all the confusion and so many different answers. I approached the authors of bootstrap with the question to clear it up once and for all.

It is now crystal that we will need to change $font-size-base which will directly change the root font-size.

I was also advised by their contributor to not control the font-size with html element rather change the bootstrap's variable instead.

REF: https://github.com/twbs/bootstrap/pull/24060

Caution about using just CSS override

using the supplied css example will not work for all aspects of bootstrap sizing.

The compiled result of scss uses the $font-size-base variable to size many things and may be used in more areas in the future.

List of sized elements

• dropdown font
• button font
• popover font
• input-group font
• forms font
• reboot font

-------------- Example SCSS --------------

This is an example for your scss files, note that you need to define the $font-size-base BEFORE including bootstrap in your main scss file. In this case, the app.scss file is the one being compiled.

app.scss

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables -- this is where you defined the variables 
//              BEFORE importing bootstrap which will use it's  
//              defaults if the variable is not predefined.
@import "variables";
// Bootstrap
@import '~bootstrap/scss/bootstrap';
// DataTables https://datatables.net/download/npm#DataTables-core
// @import "datatables";
@import "datatables.min";

_variables.scss

// Body
$body-bg: #ffffff;

// Typography
$font-size-base: 12px; // this changes the font-size throughout bootstrap
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

---

Related Topics