<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<header class="col-md-12 jumbotron">
<h1>Heading Scales With Viewport.</h1>
<div class="alert alert-warning alert-link" role="alert">Re-size your browser, and the heading above will automatically resize.</div>
<p>Best viewed: <a href="http://bootsnipp.com/iframe/4OxBR" target="_blank">full screen</a></p>
<p> <a href="http://caniuse.com/#feat=viewport-units" target="_blank">Check compatibility cross-browser/platform</a></p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at dapibus ex. Praesent sollicitudin eget enim id posuere. Duis sed mollis tellus, ut sodales augue. Aliquam eleifend magna ac ipsum maximus semper. Sed sodales interdum nunc, id dictum
massa luctus vel. Duis nisl sapien, maximus ut lacinia eu, vulputate sit amet risus. Ut vitae tempus lorem.
</p>
<hr>
<p>
<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2F4OxBR" target="_blank"><small>HTML</small><sup>5</sup></a>
</p>
</header>
</div>
</div>
