html - Bootstrap /media queries to make text smaller -

i learning how use bootstrap , media queries first time. trying make text smaller when screen gets smaller , reason not sure why bootstrap not this, mean need use media queries ? or there function in bootstrap ?

html:

  <div class = "logo">   <a class="navbar-brand" href="#">       <h1>hello</h1>       <h2>there</h2>       <h3>you</h3><br/>     <p>time make change</p>   </a>    </div>  

css:

@media (max-width: 480px) {        .logo {         float : left;          height : 20px;         width: 70px;        } 

}

i want when launch in iphone etc text in navbar shrink , become smaller, reason not doing it.

thanks again , sorry if basic question trying understand bootstrap etc :)

i think can use:

@media (max-width: 480px) { .logo { float : left; height : 20px; width: 70px; } logo.h1 { font-size: 80%; } logo.h2 { font-size: 80%; } logo.h3 { font-size: 80%; } }

this make 80% of original size.

source: w3schools