CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Suffii
Suffii

Reputation: 5784

How to Make Bootstrap 3 Button Text Responsive

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,

Upvotes: 2

Views: 38612

Answers (2)

Uriel
Uriel

Reputation: 464

I tried a different solution and it worked. I share it here:

  <button type="button" class="enviaPedido btn btn-primary btn-sm">
    <span class="visible-xs-block">Pedido</span>
    <span class="hidden-xs">Convertir en pedido</span>
  </button>

Upvotes: 3

Hashem Qolami
Hashem Qolami

Reputation: 99464

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+).

Upvotes: 10

Related Questions