rescaling text when resizing with bootstrap

Question

How can I rescale the text using bootstrap? (a h2 actually) The problem is that the heading is getting out of its box. Here is the css box code:

.buton{
    padding-top:50px;
    padding-bottom:50px;
    border:2px solid #E3A739;
    border-radius:10px;
    margin-top:3em;
    margin-bottom:3em;
}

And here is the HTML code:

<div class="row">
                    <div id="iteme" class="buton col-xs-3 col-md-3 col-lg-3">
                        <h2>Iteme</h2>
                    </div>
                  .....

How can I make the heading resize when I resize the page itself? (I want to make the site responsive)

Answer 1

You can use the vw instead of px :

.buton h2{
    font-size:3vw;
}

You should change the variable as you want it to be, and you can use media queries with it too, because in small devices, it could become invisible with the actual value (3vw) , so you can change it for small devices to be some bigger value.

You can check the browser support for the viewport units in here : CanIUseIt

I hope that this'll help.

Answer 2

What i've seen in alot of website is that they use:

font-size: 100%;

on their text elements this makes it scale within its parent. Sometimes it can work sometimes it can become so small its barely readable on a phone. Another option is using media queries.