Bootstrap Vertical Tab Menu

toolkit-bootstrap-vertical-menu

<style>
/* Vertical Tab Toolkit */

#toolkit {
color: #828282;
font-family: "Montserrat",Arial,sans-serif;
}

#toolkit .container {
  max-width: 1040px;
  width: 100%;
  margin: 0 auto;
  border: 1px solid #dedede;
  padding: 0;
  border-top: 5px solid #669910;
  padding:40px 0 20px;

}
#toolkit .nav>li>a {
    padding:30px 40px 30px 20px;
    font-size:16px;
    line-height:18px;
    font-weight:800;
}
#toolkit .nav>li.ui-state-active a {
    background-position:110% center
}

#toolkit .nav a {
    display:block;
    background-image:-webkit-linear-gradient(top,
    #eaeaea 0%,
    #f2f2f2 10%,
    #f2f2f2 100%);
    background-image:-webkit-gradient(linear,
    left top,
    left bottom,
    from(#eaeaea),
    color-stop(10%,
    #f2f2f2),
    to(#f2f2f2));
    background-image:linear-gradient(to bottom,
    #eaeaea 0%,
    #f2f2f2 10%,
    #f2f2f2 100%);
    padding:30px 80px 28px 60px;
    font-size:18px;
    color:#828282;
    cursor:pointer;
    text-transform:uppercase;
    text-decoration:none;
    float:none
}

#toolkit .nav-pills>li>a {
  border-radius: 0;
}

#toolkit .nav-pills>li.active>a, #toolkit .nav-pills>li.active>a:focus, #toolkit .nav-pills>li.active>a:hover {
  color: #669900;
  background-image:none;
  background-color: rgb(248, 250, 247);
}

#toolkit .nav-pills>li>a:focus, #toolkit .nav-pills>li>a:hover {
  color: #669900;
}

#toolkit p, #toolkit ul {
  font-size: 18px;
  line-height: 30px;
  margin:0;
}
@media screen and (min-width:600px) {
  #toolkit .col-sm-3, #toolkit .col-md-3 {
    width:25%;
    float:left;
    }
  }
@media screen and (max-width:599px) {
#toolkit p, #toolkit ul {
  padding-right: 0;
  	}
#toolkit li {
  float: left;
  width: 50%!important;
  margin: 0;
  padding: 0;
  background-image: none;
  margin-top:0;
  	}
#toolkit .nav>li>a {
  padding: 30px 40px 30px 20px;
  font-size: 16px;
  line-height: 18px;
  font-weight: 800;
  background: none;
  background-color: #669900;
  border-radius: 0;
  margin-top: 0;
  color: #FFF;
  	}
#toolkit .nav-pills>li>a:focus, #toolkit .nav-pills>li>a:hover {
  color: #273B00;
	} 
#toolkit .nav-stacked>li+li {
  margin-top: 0;
  	}
}
</style>

<section id="toolkit">
<div class="container">
<ul class="nav nav-pills nav-stacked col-sx-3 col-sm-3 col-md-3">
  <li class="active"><a href="#tab_a" data-toggle="pill">Pill A</a></li>
  <li><a href="#tab_b" data-toggle="pill">Pill B</a></li>
  <li><a href="#tab_c" data-toggle="pill">Pill C</a></li>
  <li><a href="#tab_d" data-toggle="pill">Pill D</a></li>
</ul>
<div class="tab-content col-xs-8 col-sm-8 col-md-8">
        <div class="tab-pane active" id="tab_a">
             <h2>Pane A</h2>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.</p>
        </div>
        <div class="tab-pane" id="tab_b">
             <h2>Pane B</h2>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.</p>
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/DYuiQLYodjk?list=PLh8ZfW31OjIscUP4IHxTx0yZMQz9FE526&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></p>
        </div>
        <div class="tab-pane" id="tab_c">
             <h2>Pane C</h2>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.</p>
        </div>
        <div class="tab-pane" id="tab_d">
             <h2>Pane D</h2>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.</p>
        </div>
</div><!-- tab content -->
</div><!-- end of container -->
</section><!-- end of section -->