53

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.

Mukul Kant
  • 7,074
  • 5
  • 38
  • 53
  • If you want responsive font sizes you can use media queries. [The bootstrap 4 docs show an example.](https://getbootstrap.com/docs/4.0/content/typography/#responsive-typography) – ourmandave Apr 16 '19 at 15:03

4 Answers4

51

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;
}
Jade Cowan
  • 2,543
  • 1
  • 18
  • 32
  • 2
    You can also set this to an em value, but you'll need to test at multiple sizes. The main advantage of this method is it will respect the font-size setting of the user agent and user style sheet, making your site more accessible to those with visual impairments. – LightBender Sep 01 '17 at 16:57
  • 1
    Such a setting is critical to the entire page. Developer must be aware of its implications. – NoChance Oct 03 '18 at 10:55
  • 2
    Does not work unless defined as `font-size: 16px !important;` – W.M. Sep 14 '19 at 08:06
13

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>
LobsterBaz
  • 1,752
  • 11
  • 20
7guyo
  • 3,047
  • 1
  • 30
  • 31
9

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.

Mukul Kant
  • 7,074
  • 5
  • 38
  • 53
Laeeq Khan Niazi
  • 568
  • 4
  • 11
  • 7
    These classes should be used to indicate logical structure, not to control text size. – Armando Fox Feb 02 '19 at 19:13
  • 2
    i am not talking about java classes... i am just talking about css class. you have to read about css classes first. – Laeeq Khan Niazi Feb 16 '19 at 16:27
  • 4
    @ArmandoFox I disagree — HTML classes don't have any intrinsic semantic value the way that HTML elements do. They are largely arbitrary hooks for styling, and Bootstrap has chosen that convention precisely to control font sizing. – Jon Apr 03 '19 at 15:51
  • 1
    @Jon you have a lot more mileage with HTML+CSS than I do so thanks for your comment. I have to admit I'm surprised though, since I always thought the whole point of using CSS correctly was to allow the HTML elements to reflect the logical structure of the document. Since H1 thru H6 suggest hierarchical sections, I assumed that .h1 thru .h6 were intended to be similarly applied. I defer to your experience though. – Armando Fox Apr 04 '19 at 16:09
  • 3
    @ArmandoFox in terms of HTML structure you're absolutely right — elements should be chosen for their semantic value (e.g. they should describe the content they contain) and then machines/bots can make inferences from that data. But classes don't have any meaning beyond being hooks for CSS or JS, so the naming really becomes a personal choice on the developers' part. I think Bootstrap used this convention because most devs intuitively think "h1 is bigger than h2", so they figured that would be an easy way of visualizing it (e.g. I want this element to be an `h3`, but be styled like an `h1`). – Jon Apr 04 '19 at 17:45
  • I'm a newbie in Bootstrap but it was a little confusing in that you could create a tag, say

    Header Text

    or just use the ".h3" class.     – George Beier Aug 29 '19 at 22:25
  • 1
    CSS is for style (as its name suggests) and HTML for the semantic markup. Use HTML `h1` only with real headings but the css `h1` from bootstrap can be used wherever you like without SEO or semantic impact. – Daniel W. Dec 14 '20 at 01:19
2

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.

Alan Baljeu
  • 2,383
  • 4
  • 25
  • 40