Bootstrap font scaling too small on mobile

Question

I've spent a lot of time working with Foundation and less time working with Bootstrap. I'm having an issue with responsiveness in Bootstrap that I don't understand because this just seems to work in Foundation. The issue is that, while the grid responsiveness works as expected, my fonts are getting scaled so tiny that it is almost illegible on mobile. Notice in my example below that I set the font size to 14px, but on mobile this is becoming very tiny. You can see this by clicking on the mobile button in the Chrome dev tools.

The html to reproduce this is very simple, here is a jsbin: http://jsbin.com/lumepumufu/1/

And here's the html:

<html>
  <head>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  </head>
  <body style="font-size:14px">
    <div class="container">
      <div class="row">
        <div class="col-lg-4">col-lg-4</div>
        <div class="col-lg-4">col-lg-4</div>
        <div class="col-lg-4">col-lg-4</div>
      </div>
    </div>
  </body>
</html>

Do you have a viewport meta tag inside the head tag like ``? — ckuijjer, Jan 02 '15 at 18:37
@thebjorn I get the same result viewing the site directly on my phone. — Jim Cooper, Jan 02 '15 at 19:05
@ckuijjer I experimented with that, but saw the same result either way. The jsbin I linked does not have that. Do you see the same thing (tiny fonts) if you view that jsbin on a mobile device? — Jim Cooper, Jan 02 '15 at 19:05
I do see the tiny font on my mobile. I really think it is the viewport, see your code with viewport added ad http://jsbin.com/qapuwu/1/ — ckuijjer, Jan 02 '15 at 19:11
Try [Bootlinting](https://github.com/twbs/bootlint) your page. — cvrebert, Jan 03 '15 at 23:16

score 127 · Answer 1 · answered May 26 '15 at 13:19

127

Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.

To ensure proper rendering and touch zooming, add the viewport meta tag to your head

<meta name="viewport" content="width=device-width, initial-scale=1">

answered May 26 '15 at 13:19

ziaprog

1,497
1
10
11

1

Oh man, so much trouble, and such a simple fix. Thanks tons! – Safwan Samsudeen Oct 27 '22 at 02:42

thebjorn · Accepted Answer · 2015-01-02T19:46:01.023

You should always start from a template, e.g. the "Basic template" (http://getbootstrap.com/getting-started/#template). This works as intended:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body style="font-size:14px">
    <div class="container">
      <div class="row">
        <div class="col-lg-4">col-lg-4</div>
        <div class="col-lg-4">col-lg-4</div>
        <div class="col-lg-4">col-lg-4</div>
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

It might seem like a lot of "cruft", but everything is there for a reason.

Everything is not there for a reason. This is a CSS issue and there's no need to include jquery or bootstrap javascript for this sole purpose. As mentioned in comments and the below answer, `` is the correct answer. — kareblak, Nov 17 '16 at 09:54
In the context of someone who is starting out with Bootstrap, as is the case in this question, I still feel that the right approach is to start out with the provided templates. As you gain a deeper understanding of the inner workings you will naturally adapt the scaffolding to the specific needs of your project, but that would be a very frustrating way to start learning Bootstrap. — thebjorn, Nov 17 '16 at 19:55
For anyone using this example - this is definitely the best way to do it BUT note that the JS links at the bottom are out of date - the CDN used is now JSDeliver - you can access the up to date CDN links here https://www.bootstrapcdn.com/ — nc14, Apr 25 '22 at 09:50

score 2 · Answer 3 · answered Aug 25 '22 at 19:18

2

I had this problem, and my issue ended up being the code formatter I was using. It was closing the tags with "/", which caused my program to not use the tags. Specifically the:

<meta name="viewport" content="width=device-width, initial-scale=1">

answered Aug 25 '22 at 19:18

Travis Jones

21
3

Feuda · Answer 4 · 2017-04-17T09:42:42.653

0

If you are running a rails app, you can try the gem rails_layout

edited Apr 17 '17 at 09:42

answered Mar 31 '17 at 12:03

Feuda

2,335
30
28

score 0 · Answer 5 · answered Mar 01 '20 at 10:22

0

i was having problems with small fonts and a small navbar, my problem was setting the navbar width in css, using max-width instead of just width solved my scaling problem

answered Mar 01 '20 at 10:22

Fernando Itami

1

score 0 · Answer 6 · answered Mar 21 '20 at 20:47

0

use "rem" instead of px; ( pixel ); like .myclass { font-size: 1rem; }

answered Mar 21 '20 at 20:47

Krishan Kumar

394
4
13

Bootstrap font scaling too small on mobile

6 Answers6

Linked