Bootstrap full width buttons .btn-group-vertical

Question

<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.

Answer 1

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>