Navigation :

Vertical Tabs Light Table


        
            
                
                    
                        Home
                        Profile
                        Messages
                        Settings
                    
                
                
                    
                        
                            
                                
                                  
                                    #
                                    First
                                    Handle
                                  
                                
                                
                                  
                                    1
                                    Mark
                                    @mdo
                                  
                                  
                                    2
                                    Jacob
                                    @fat
                                  
                                  
                                    3
                                    Larry the Bird
                                    @fat
                                  
                                
                              
                        
                        
                                
                                        
                                          
                                            #
                                            First
                                            Handle
                                          
                                        
                                        
                                          
                                            1
                                            Mark
                                            @mdo
                                          
                                          
                                            2
                                            Jacob
                                            @fat
                                          
                                          
                                            3
                                            Larry the Bird
                                            @fat
                                          
                                        
                                      
                        
                        
                                
                                        
                                          
                                            #
                                            First
                                            Handle
                                          
                                        
                                        
                                          
                                            1
                                            Mark
                                            @mdo
                                          
                                          
                                            2
                                            Jacob
                                            @fat
                                          
                                          
                                            3
                                            Larry the Bird
                                            @fat
                                          
                                        
                                      
                        
                        
                                
                                        
                                          
                                            #
                                            First
                                            Handle
                                          
                                        
                                        
                                          
                                            1
                                            Mark
                                            @mdo
                                          
                                          
                                            2
                                            Jacob
                                            @fat
                                          
                                          
                                            3
                                            Larry the Bird
                                            @fat

#	First	Handle
1	Mark	@mdo
2	Jacob	@fat
3	Larry the Bird	@fat

#	First	Handle
1	Mark	@mdo
2	Jacob	@fat
3	Larry the Bird	@fat

#	First	Handle
1	Mark	@mdo
2	Jacob	@fat
3	Larry the Bird	@fat

#	First	Handle
1	Mark	@mdo
2	Jacob	@fat
3	Larry the Bird	@fat

    <div class="container">
        <div class="pills-container">
            <div class="row">
                <div class="col-md-2">
                    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                        <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home"
                            aria-selected="true">Home</a>
                        <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile"
                            aria-selected="false">Profile</a>
                        <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages"
                            aria-selected="false">Messages</a>
                        <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings"
                            aria-selected="false">Settings</a>
                    </div>
                </div>
                <div class="col-md-10">
                    <div class="tab-content bcg-white" id="v-pills-tabContent">
                        <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                            <table class="table table-borderless">
                                <thead>
                                  <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">First</th>
                                    <th scope="col">Handle</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  <tr>
                                    <th scope="row">1</th>
                                    <td>Mark</td>
                                    <td>@mdo</td>
                                  </tr>
                                  <tr>
                                    <th scope="row">2</th>
                                    <td>Jacob</td>
                                    <td>@fat</td>
                                  </tr>
                                  <tr>
                                    <th scope="row">3</th>
                                    <td>Larry the Bird</td>
                                    <td>@fat</td>
                                  </tr>
                                </tbody>
                              </table>
                        </div>
                        <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                                <table class="table table-borderless">
                                        <thead>
                                          <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">First</th>
                                            <th scope="col">Handle</th>
                                          </tr>
                                        </thead>
                                        <tbody>
                                          <tr>
                                            <th scope="row">1</th>
                                            <td>Mark</td>
                                            <td>@mdo</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">2</th>
                                            <td>Jacob</td>
                                            <td>@fat</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">3</th>
                                            <td>Larry the Bird</td>
                                            <td>@fat</td>
                                          </tr>
                                        </tbody>
                                      </table>
                        </div>
                        <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                                <table class="table table-borderless">
                                        <thead>
                                          <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">First</th>
                                            <th scope="col">Handle</th>
                                          </tr>
                                        </thead>
                                        <tbody>
                                          <tr>
                                            <th scope="row">1</th>
                                            <td>Mark</td>
                                            <td>@mdo</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">2</th>
                                            <td>Jacob</td>
                                            <td>@fat</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">3</th>
                                            <td>Larry the Bird</td>
                                            <td>@fat</td>
                                          </tr>
                                        </tbody>
                                      </table>
                        </div>
                        <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
                                <table class="table table-borderless">
                                        <thead>
                                          <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">First</th>
                                            <th scope="col">Handle</th>
                                          </tr>
                                        </thead>
                                        <tbody>
                                          <tr>
                                            <th scope="row">1</th>
                                            <td>Mark</td>
                                            <td>@mdo</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">2</th>
                                            <td>Jacob</td>
                                            <td>@fat</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">3</th>
                                            <td>Larry the Bird</td>
                                            <td>@fat</td>
                                          </tr>
                                        </tbody>
                                      </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

        body {
        background-color:#f7f7f7!important;
}
body a,
body .btn {
    -moz-transition: all 0.3s!important;
    -o-transition: all 0.3s!important;
    -webkit-transition: all 0.3s!important;
    transition: all 0.3s!important;
    font-family: ‘Montserrat’, sans-serif!important;
}
.pills-container {
    padding-top: 2%!important;
    padding-bottom: 2%!important;
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #040f2f!important;
    background-color: #ffffff!important;
    font-weight: 500!important;
    border-right: solid 3px darkslategrey!important;
    border-radius: 0px!important;
}
.nav-pills>a {
    color: #c8c8c8!important;
    font-weight: 500!important;
}
.tab-pane {
    color: #777777!important;
    font-family: ‘Montserrat’!important;
    margin-top: -5px!important;
}
.table > thead {
    border-bottom: solid 1px #efefef!important;
}
@media screen and (max-width:764px) {
    .tab-pane {
        margin-top: 5px!important;
    }
}
.bcg-white {
    background-color: #ffffff!important;
}