Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 284
Mukul Kant Avatar asked Sep 01 '17 11:09

Mukul Kant


People also ask

How do I change font-size in Bootstrap 4?

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.

How do I make the font bigger in Bootstrap?

Use the . lead class in Bootstrap to increase the font size of a paragraph.

What is the font-size of in Bootstrap 4 by default?

Bootstrap 4 Default Settings Bootstrap 4 uses a default font-size of 16px, and its line-height is 1.5. The default font-family is "Helvetica Neue", Helvetica, Arial, sans-serif. In addition, all <p> elements have margin-top: 0 and margin-bottom: 1rem (16px by default).


1 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; }  
like image 140
Jade Cowan Avatar answered Sep 28 '22 23:09

Jade Cowan