Bootstrap setting height for btn-block buttons

My code looks like this:

<div> <div> <a href="#">1</a> </div> <div> <a href="#">2</a> </div> <div> <a 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.

3 Answers

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 */ } 

Use Bootstrap padding property p-. Documentation

<a href="#">1</a> 

Actually, just use py-4 as an extra class on your button.

py-# adds padding on top and bottom at the same time, and you can choose how much by changing the number (I think the max is 4, but I might be wrong).

You can check all the options here (it works at least from Bootstrap 4 onwards).