Bootstrap Setting Height for Btn-Block Buttons
My Code Looks Like This: 1 2 3 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...
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.
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 class="btn btn-default btn-block p-3" 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).
Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.
