jQuery-BS3-VERTICALLY STACKED PILLS/TABS

by freedawirl

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc2/css/bootstrap.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="container">
    <ul class="stacked-menu nav nav-stacked col-md-2">
        <li class="active"><a href="#tab_a" data-toggle="pill">Pill A</a>

        </li>
        <li class=""><a href="#tab_b" data-toggle="pill">Pill B</a>

        </li>
        <li class=""><a href="#tab_c" data-toggle="pill">Pill C</a>

        </li>
        <li class=""><a href="#tab_d" data-toggle="pill">Pill D</a>

        </li>
        <li class=""><a href="#tab_e" data-toggle="pill">Pill E</a>

        </li>
        <li class=""><a href="#tab_f" data-toggle="pill">Pill F</a>

        </li>
        <li class=""><a href="#tab_g" data-toggle="pill">Pill G</a>

        </li>
        <li class=""><a href="#tab_h" data-toggle="pill">Pill H</a>

        </li>
        <li class=""><a href="#tab_i" data-toggle="pill">Pill I</a>

        </li>
    </ul>
    <div class="tab-content col-md-10">
        <!-- King Bus Ad -->
        <div class="tab-pane active" id="tab_a">
            <table class="table blue-table table-bordered">
                <tbody>
                    <tr>
                        <th>Showing</th>
                        <th>Units</th>
                        <th>Standard Rate</th>
                        <th>Peak Rate <span>(SXSW, ACL FEST, F1, X GAMES)</span>

                        </th>
                        <th>Installation Fee</th>
                    </tr>
                    <tr>
                        <td>-</td>
                        <td>1</td>
                        <td>$429</td>
                        <td>$540</td>
                        <td>$38</td>
                    </tr>
                    <tr>
                        <td>25</td>
                        <td>49</td>
                        <td>$17,868</td>
                    ...

CSS

.stacked-menu {
    width:120px;
    float:left;
}
.tab-content {
    width:580px;
    float:left;
}
.blue-table th {
    background:#0069AA;
    color:#fff;
}
.modal-body {
    position: relative;
    padding: 0px;
}
.modal-content {
    background-color: rgba(0, 0, 0, 0.65);
}
.modal-title {
    margin: 0;
    color: #fff;
}
.modal-dialog {
    right: auto;
    left: 50%;
    width: 813px !important;
    min-width: 600px;
    padding-top: 30px;
    padding-bottom: 30px;
}
.close {
    color: #fff;
    text-shadow: 0 1px 0 #000000;
    opacity: 0.8;
}
.close:hover {
        color: #fff;
    opacity: 0.2;
}
.modal-header {
min-height: 16.428571429px;
padding: 15px;
border-bottom: none;
}
.modal-footer {
padding: 19px 20px 20px;
margin: 0px;
text-align: right;
border-top: none;
}