CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Mukul Kant
Mukul Kant

Reputation: 7122

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.

Upvotes: 53

Views: 140228

Answers (4)

Salad.Guyo
Salad.Guyo

Reputation: 3415

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" class="display-3", class="small"-->
<div *ngIf="customer_selected" class="h5">
  <p>First name: {{selected_customer.first_name}}</p>
  <p>Last name: {{selected_customer.last_name}}</p>
</div>

Upvotes: 14

Alan Baljeu
Alan Baljeu

Reputation: 2443

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.

Upvotes: 2

Laeeq Khan Niazi
Laeeq Khan Niazi

Reputation: 648

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.

Upvotes: 9

Jade Cowan
Jade Cowan

Reputation: 2593

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

Upvotes: 51

Related Questions