Bootstrap setting height for btn-block buttons

Question

My code looks like this:

<div class="row">
  <div class="col-xs-4">
    <a class="btn btn-default btn-block" href="#">1</a>
  </div>
  <div class="col-xs-4">
    <a class="btn btn-default btn-block" href="#">2</a>
  </div>
  <div class="col-xs-4">
      <a class="btn btn-default btn-block" href="#">3</a>
  </div>
</div>

This gives me 3 buttons across which is what I want. What I would like to do is make the buttons taller. If at all possible I'd prefer not to specify heights in pixels so that it can scale to different screen sizes better. Could I perhaps specify the height as a ratio (of the width) or a percentage of screen height?

Thanks in advance.

Answer 1

The simple & best solution would be to add top and bottom padding.

.btn-block {
    padding: 10% 0; 
    /* define values in pixels / Percentage or em. whatever suits 
       your requirements */
}