How to increase font-size in Bootstrap 4?

Question

In Bootstrap 4, font-size defaults to using em or rem for fonts.

How can I increase the font-size for all viewport sizes? Because every element looks tiny.

Answer 1

Because Bootstrap 4 uses rem for the font-size unit of most of it's elements, you can set the font-size in px on the HTML element in your own stylesheet and this will change the default sizing Bootstrap applies to your elements. I've included a link to a codeply project, so you can see it in action. The environment already has Bootstrap 4 loaded in it. If you change the value of the font-size for the html selector and run the project you can see how the sizing of the elements all change relative to the root element.

Adding three lines of CSS to your stylesheet should be pretty easy:

html {
    font-size: 16px;
}