html - bootstrap 3 scaling text -

i've started using bootstrap 3 , whilst playing layout can't seem text scale on mobile when within jumbotron h1 tag. i'm trying copy jumbotron on getbootstrap site has large text scales down when viewport changes.

    <div class="row">   <div class="col-xs-12">     <div class="jumbotron">       <div class="container">       <center><span class="h1">testing jumbotron </span></center>       <div class="col-xs-2 col-xs-offset-5 btn-info btn btn-sm">full</div>     </div>   </div>   </div> </div> 

i've looked @ example , seems heading scale within bootstrap 3 ... maybe because i'm using flat-ui has broken this?

try changing html this.

<div class="container">     <div class="jumbotron">         <div class="row">             <center><span class="h1 col-xs-10">testing jumbotron </span>              </center>             <div class="col-xs-2 btn-info btn btn-sm">full</div>         </div>     </div> </div> 

simplest way use dimensions in % or em. change base font size change.

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