Auto-Resizing Heading on Bootstrap 3 site

Question

How I create the resizable <h1> element on the getboostrap.com homepage for Bootstrap 3: http://getbootstrap.com/getting-started/

I know I can use tools like fittext.js but theirs adjusts by using CSS media queries it seems.

Answer 1

From their CSS

@media (min-width: 768px) {
  .bs-masthead h1 {
    font-size: 100px;
  }
}

.bs-masthead h1 {
  font-size: 50px;
  line-height: 1;
  color: #fff;
}

Answer 2

You can put your <h1> tag in a Jumbotron . The default h1 font-size is 36px. You can use media queries to make it bigger:

@media screen and (min-width: 768px) {
  h1.resizable {
    font-size: 63px;
  }
}

You can add the resizable class to any h1 tag and it will make it bigger if the screen width is at minimum 768px.