Parc Roi Parc Roi - 1 year ago 78
CSS Question

Responsive button with glyphicons

I am using bootstrap to build an responsive website (small social network), I used glyphicons with buttons and it works fine on full screen, my problem is that the glyphicons go outside the border of the button whenever the browser width is decreased image included:

glyphicons go outside the button border

the code is:

<div class="row">
<div class="btn-group-vertical col-sm-2" style="width: 9% ">
<button type="button" class ="btn btn-default" style="font-size:3vw"><span class="glyphicon glyphicon-thumbs-up" style="vertical-align:middle;text-align: center;"></span></button>

<button type="button" class="btn btn-default" style="font-size:3vw"><span class="glyphicon glyphicon-thumbs-down" style="vertical-align:middle; text-align: center"></span></button>
<button type="button" class="btn btn-default" style="font-size:3vw"> <span class="glyphicon glyphicon-tags"></span> </button>

So my question is: How to make this responsive, whatever is the size of the screen?

Answer Source

You have the button width set to style="width: 9%". So when the screen is smaller the button width will be 9% of the screen.