180

I am trying to build a responsive layout using bootstrap and currently am defining some of the titles with font-size:3em;

But when the layout is shrunk down this is too big. How can I responsively reduce the size of the text?

Pavlo
  • 43,301
  • 14
  • 77
  • 113
Somk
  • 11,869
  • 32
  • 97
  • 143
  • Have you tried using percentages for the font-size? – Garry Cairns Jan 26 '13 at 14:06
  • 23
    This is not a duplicate of the indicated answer. This question is **specific** to Bootstrap as is the answer below. There is a subtle but important difference. Bootstrap defines variables in LESS to be used in your media queries. I would urge @kapa to remove the inaccurate duplicate designation. – Dave Jensen Oct 02 '15 at 20:57
  • 1
    @DaveJensen I don't agree. The solution does not depend on Bootstrap. The answers are also almost exactly the same under the two questions. It does not make a difference whether the screen size comes from a LESS/SASS variable, or simply hard coded. – kapa Oct 04 '15 at 16:30
  • 1
    Bootstrap 3.3.5 only changes font size in response to media queries for carousel glyphicons - so you cannot do this with bootstrap - you need to create your own media queries as described in other answers (to this and other questions). – Steve Tarver Oct 24 '15 at 05:45
  • The Bootstrap 4 documentation specifically addresses this Bootstrap question: https://getbootstrap.com/docs/4.0/content/typography/#responsive-typography – Michael Cole Aug 11 '18 at 19:55
  • OMG, so many complicated answers. [just use css rem](https://snook.ca/archives/html_and_css/font-size-with-rem). In the case of Bootstrap, you would set "root font size" (html's font size) in each media query. Then use rem units everywhere else. – ToolmakerSteve May 08 '19 at 21:56
  • Hey, I think the "already answered" tag is wrong. Should be taken off, as Dave Jensen indicates. kapa's response may be correct, but it isn't a practical answer to the specific question. A specific answer would put the general answer in context and make it usable in the specific, as it is not currently usable. – codenoob Jun 01 '19 at 13:00
  • Bootstrap v5 has **enabled Responsive Font Sizes by default**. You can get more information about this on the [bootstrap typography page](https://getbootstrap.com/docs/5.0/content/typography/#responsive-font-sizes) – P0intMaN Feb 12 '22 at 11:32

2 Answers2

159

Simplest way is to use dimensions in % or em. Just change the base font size everything will change.

Less

@media (max-width: @screen-xs) {
    body{font-size: 10px;}
}

@media (max-width: @screen-sm) {
    body{font-size: 14px;}
}


h5{
    font-size: 1.4rem;
}

Look at all the ways at https://stackoverflow.com/a/21981859/406659

You could use viewport units (vh,vw...) but they dont work on Android < 4.4

aWebDeveloper
  • 36,687
  • 39
  • 170
  • 242
66

Well, my solution is sort of hack, but it works and I am using it.

1vw = 1% of viewport width

1vh = 1% of viewport height

1vmin = 1vw or 1vh, whichever is smaller

1vmax = 1vw or 1vh, whichever is larger

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}
Murtaza Khursheed Hussain
  • 15,176
  • 7
  • 58
  • 83
  • 1
    Better use media queries till viewport units are supported in most mobile devices, see e.g. http://www.quirksmode.org/mobile/tableViewport.html – pors Jan 05 '14 at 19:40
  • 7
    It's already well supported http://caniuse.com/#feat=viewport-units – Facundo Colombier Sep 15 '14 at 15:52
  • 1
    It's well supported, but the responsive breakpoints in Bootstrap mess up the layout. This is a cool idea for a non-breakpoint responsive framework. – Michael Cole Aug 09 '18 at 05:47
  • Viewports units will never take off even if they are supported because we generally need font sizes to be specified in percent width and height of the container, not the viewport. – kloddant Aug 16 '18 at 21:23
  • 5
    You should not use this for font sizes. It disables the users ability to change the text size using zoom. – ViktorMS Aug 29 '18 at 10:33