Bootstrap Vertical Left Tabs

by labanino

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="wrapper">
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">Launch modal</button>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

                </button>
            </div>
            <div class="modal-body">
                <div class="col-xs-3">
                    <!-- required for floating -->
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs tabs-left">
                        <li class="active"><a href="#home" data-toggle="tab">Home</a>

                        </li>
                        <li><a href="#profile" data-toggle="tab">Profile</a>

                        </li>
                        <li><a href="#messages" data-toggle="tab">Messages</a>

                        </li>
                        <li><a href="#settings" data-toggle="tab">Settings</a>

                        </li>
                    </ul>
                </div>
                <div class="col-xs-9">
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane active" id="home">Home Tab.</div>
                        <div class="tab-pane" id="profile">Profile Tab.</div>
                        <div class="tab-pane" id="messages">Messages Tab.</div>
                        <div class="tab-pane" id="settings">Settings Tab.</div>
                   ...

CSS

.wrapper {
    padding: 20px;
}
.modal-header {
    border-bottom: 0;
    padding: 15px 15px 0 0
}
.modal-footer {
    border-top: 0;
}
#myModal .col-xs-3 {
    padding-left: 0;
}
/* TABS */
 .tabs-left, .tabs-right {
    border-bottom: none;
    padding-top: 2px;
}
.tabs-left {
    border-right: 1px solid #ddd;
}
.tabs-right {
    border-left: 1px solid #ddd;
}
.tabs-left>li, .tabs-right>li {
    float: none;
    margin-bottom: 2px;
}
.tabs-left>li {
    margin-right: -1px;
}
.tabs-right>li {
    margin-left: -1px;
}
.tabs-left>li.active>a {
    border-top: 1px solid rgba(204, 204, 204, 0.35);
    border-bottom: 1px solid rgba(204, 204, 204, 0.35);
    border-left: 1px solid rgba(204, 204, 204, 0.35);
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover {
    border-bottom: 1px solid #ddd;
}
.tabs-left>li.active>a, .tabs-left>li.active>a:hover, .tabs-left>li.active>a:focus {
    border-bottom-color: #ddd;
    border-right-color: transparent;
}
.tabs-right>li.active>a, .tabs-right>li.active>a:hover, .tabs-right>li.active>a:focus {
    border-bottom: 1px solid #ddd;
    border-left-color: transparent;
}
.tabs-left>li>a {
    border-radius: 0;
    margin-right: 0;
    border: 0;
}
.sideways {
    margin-top:50px;
    border: none;
    position: relative;
}
.sideways>li {
    height: 20px;
    width: 120px;
    margin-bottom: 100px;
}
.sideways>li>a {
    border-bottom: 1px solid #ddd;
    border-right-color: transparent;
    text-align: center;
    border-radius: 4px 4px 0px 0px;
}
.sideways>li.active>a, .sideways>li.active>a:hover, .sideways>li.active>a:focus {
    border-bottom-color: transparent;
    border-right-color: #ddd;
    border-left-color: #ddd;
}
.sideways.tabs-left {
    left: -50px;
}
.sideways.tabs-right {
    right: -50px;
}
.sideways.tabs-right>li {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.sideways.tabs-left>li {
   ...