1

How to make the font-size responsive with Twitter Bootstrap?

I wrote a code which is fully responsive in width but the font is not responsive. As you can see in the following screenshot (Android default browser) the font size and text boxes are also very small. How to fix this problem ?

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

enter image description here

Zanon
  • 29,231
  • 20
  • 113
  • 126
Hari Das
  • 10,145
  • 7
  • 62
  • 59
  • Did you try it with a 'normal' browser? like mozilla or chrome – Dávid Szabó May 11 '14 at 18:11
  • I need to make it work in default browser as well. – Hari Das May 12 '14 at 14:29
  • There is no way to make something work in EVERY version EVERY browser. You need to forget some browser, maybe you can try using javascript to adjust font size, or try using 'em'. – Dávid Szabó May 12 '14 at 16:07
  • I am trying to implement it with Google Apps Script Web app. So, I think because of Caza Sanitization the responsive part is not working. – Hari Das May 12 '14 at 18:32
  • Possible duplicate of [Bootstrap Responsive Text Size](http://stackoverflow.com/questions/14537611/bootstrap-responsive-text-size) – kapa Oct 07 '15 at 07:34

2 Answers2

0

i also solve this problem in my projects with media queries. like this:

@media (max-width: 991px) {    
    body {
        font-size: 12px;
    }
}

@media (min-width: 992px) {
    body {
        font-size: 14px;
    }
}

@media (min-width: 1200px) {
    body {
        font-size: 16px;
    }
}

this method is working good for me, but maybe there are also smarter solutions?!

Woidfeeee
  • 41
  • 12
-2

You can use media queries like this example http://jsbin.com/pupuburu/1

Try to resize window.

integral
  • 395
  • 2
  • 4