How to Make Bootstrap 3 Button Text Responsive

Question

Can you please take a look at This Demo and let me know how I can make only the text inside the buttons responsive to the size of the button?

<div class="container"><div class="well">
    <button type="button" class="btn btn-default btn-lg btn-block">Make Me Responsive!</button>
</div></div>

As you can see from the demo the buttons test font size stays same as the initial times on resizing the windows. Can you please let me know how I can update id without using the body element?

Thanks,

Answer 1

While you could use CSS @media queries to achieve the result, you could also use vw Viewport-percentage lengths in order to specify the font-size based on the width of the viewport:

EXAMPLE HERE

<button type="button" class="btn btn-default btn-lg btn-block responsive-width">
    Make Me Responsive!
</button>

.responsive-width {
    font-size: 3vw;
}

5.1.2 Viewport-percentage lengths: the vw, vh, vmin, vmax units

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist. Note that the initial containing block’s size is affected by the presence of scrollbars on the viewport.

vw unit
Equal to 1% of the width of the initial containing block.

It's worth noting that vw unit is supported in the modern web browsers (including IE9+).