How to increase font-size in Bootstrap 4?

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.

4 Answers

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

You can use .h1 to .h6 bootstrap classes or you can make your own custom CSS class and define font size over here and put your class on your HTML element.

Bootstrap 4: There're range of classes you can use to customize your text:

• h1 - h6
• display-1 - display-4
• small
• lead

I.e:

<!--class="h3",--> <div *ngIf="customer_selected"> <p>First name: {{selected_customer.first_name}}</p> <p>Last name: {{selected_customer.last_name}}</p> </div> 

You may also want to consider adding this:

<meta name="viewport" content="width=device-width, user-scalable=no" /> 

When I added this, my mobile browsers suddenly showed reasonable text sizes.