Menu
<div class="container">
<div class="btn-group-vertical">
<a href="3overview.php" class="btn btn-primary">Overview</a>
<a href="" class="btn btn-primary">Button</a>
<a href="" class="btn btn-primary">Button</a>
<a href="" class="btn btn-primary">Button</a>
<br>
<a href="" class="btn btn-warning">Button</a>
<a href="" class="btn btn-danger">Button</a>
</div>
</div>
I am trying to make it so these buttons are full-width of the container that they are in but I can't seem to get it to work, I have tried .btn-group-justified but nothing works with .btn-group-vertical. Can someone help?
EDIT 11/28/2017: Marked the accepted answer and fixed some typos I found.
340
asked Dec 21 '16 14:12
Use the class .btn-group-vertical to create a vertical button group: To span the entire width of the screen, use the .btn-group-justified class: Note: For <button> elements, you must wrap each button in a .btn-group class: Add a Bootstrap class to group the buttons together.
Bootstrap class btn-group-vertical Bootstrap Web Development CSS Framework The btn-group-vertical class makes a set of buttons appear vertically stacked rather than horizontally. You can try to run the following code to work with vertical button group −
To span the entire width of the screen, use the .btn-group-justified class: Note: For <button> elements, you must wrap each button in a .btn-group class: Add a Bootstrap class to group the buttons together.
Tip: Instead of applying button sizes to every button in a group, use class .btn-group-lg|sm|xs to size all buttons in the group: Use the class .btn-group-vertical to create a vertical button group: To span the entire width of the screen, use the .btn-group-justified class:
The btn-group-vertical has an automatic set width of 85px as far as I can see. Setting it to 100%, fixes your problem. It should be done in a stylesheet, but under is an inline solution:
<div class="container">
<div class="btn-group-vertical" style="width: 100%;">
<a href="3overview.php" class="btn btn-primary">Overview</a>
<a href="" class="btn btn-primary">Button</a>
<a href="" class="btn btn-primary">Button</a>
<a href="" class="btn btn-primary">Button</a>
<br>
<a href="" class="btn btn-warning">Button</a>
<a href="" class="btn btn-danger">Button</a>
</div>
</div>
EDIT: While this works, I'd go with Vlads answer instead. It is better than mine. And works as well. Although, you do not have to add the class to the individual buttons. Adding the class to the button group is enough. Like this:
<div class="container">
<div class="btn-group-vertical btn-block" style="width: 100%;">
<a href="3overview.php" class="btn btn-primary">Overview</a>
<a href="" class="btn btn-primary">Button</a>
<a href="" class="btn btn-primary">Button</a>
<a href="" class="btn btn-primary">Button</a>
<br>
<a href="" class="btn btn-warning">Button</a>
<a href="" class="btn btn-danger">Button</a>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
