Make bootstrap vertical buttons fit screen height

Question

I have a list of vertical buttons, how do I make them to fit the screen ? Like this :

HTML code :

  <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
        <button type="button" class="btn btn-default">Button</button>
        <button type="button" class="btn btn-default">Button</button>
        <div class="btn-group" role="group">
            <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
                <li><a href="#">Dropdown link</a></li>
                <li><a href="#">Dropdown link</a></li>
            </ul>
        </div>
        <button type="button" class="btn btn-default">Button</button>
        <button type="button" class="btn btn-default">Button</button>
        <div class="btn-group" role="group">
            <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
                <li><a href="#">Dropdown link</a></li>
                <li><a href="#">Dropdown link</a></li>
            </ul>
        </div>
        <div class="btn-group" role="group">
            <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3">
                <li><a href="#">Dropdown link</a></li>
                <li><a href="#">Dropdown link</a></li>
            </ul>
        </div>
        <div class="btn-group" role="group">
            <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
                <li><a href="#">Dropdown link</a></li>
                <li><a href="#">Dropdown link</a></li>
            </ul>
        </div>
    </div>

Link to JSFiddle

Thanks alot, I'm very new to this, sorry if my question is silly!

And this is the blah blah blah blah blah blah blah blah blah blah blah blah blah I have to add to fit SO's rules, sorry again !

Answer 1

I take back what I said in my comment.

This is about as close as I could get you. You'll have to figure the math and whatnot on your own, but this should get you pointed in the right direction. Could also just be JSFiddle that's causing it to not adhere strictly to the output window size.

Instead of using btn-group, use btn-block. Create a CSS class that sets the width for the class to whatever you want, then use a bit of jQuery to figure out the height in some way based on the size of your window or div, and use some sort of math to set your button's heights to work with the viewport. Mine is completely arbitrary, you can set it up however you want to suit your needs.

HTML:

<button type="button" class="btn btn-primary btn-block">Test1</button>
<button type="button" class="btn btn-primary btn-block">Test2</button>
<button type="button" class="btn btn-primary btn-block">Test3</button>
<button type="button" class="btn btn-primary btn-block">Test4</button>
<button type="button" class="btn btn-primary btn-block">Test5</button>
<button type="button" class="btn btn-primary btn-block">Test6</button>

CSS:

.btn-block {
    width: 150px;
}

jQuery:

var height = $(window).height();

var btnHeight = (height / 6) - 19;

$('.btn-block').height(btnHeight);

FIDDLE