"Bootstrap Tabbing"
Bootstrap 3.3.0 Snippet by Tejesh Sharma

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://use.fontawesome.com/9846a7d624.js"></script> <section class="application_section"> <div class="container "> <ul class="nav nav-pills nav-stacked"> <li class="active"><a data-toggle="tab" href="#home">T</a></li> <li><a data-toggle="tab" href="#menu1">S</a></li> </ul> <div class="tab-content"> <div id="home" class="tab-pane fade in active"> <div class="col-sm-6"> <div class="col-sm-10"> <h1 class="text-uppercase">Demo Content</h1> <a href="#" class="btn btn-org text-uppercase radius public">Demo Content</a> <p class="para1">Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <div class="social_ico col-sm-12"><div class="row"><a href="#"> <i class="fa fa-facebook"></i></a><a href="#"> <i class="fa fa-twitter"></i> </a><a href="#"> <i class="fa fa-google-plus"></i> </a> </div></div> </div></div> <div class="col-sm-6 text-right app_img"> <img src="http://images.freeimages.com/images/previews/c5a/man-2-1566253.jpg" alt="User Avatar" class="img-responsive"> </div> </div> <div id="menu1" class="tab-pane fade"> <div class="col-sm-6"> <div class="col-sm-10"> <h1 class="text-uppercase">Demo New Content</h1> <a href="#" class="btn btn-org text-uppercase radius public">Demo Content1</a> <p class="para1">Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <div class="social_ico col-sm-12"><div class="row"><a href="#"> <i class="fa fa-facebook"></i></a><a href="#"> <i class="fa fa-twitter"></i> </a><a href="#"> <i class="fa fa-google-plus"></i> </a> </div></div> </div></div> <div class="col-sm-6 text-right app_img"> <img class="img-responsive" src="http://images.freeimages.com/images/previews/41b/man-on-mountain-1389328.jpg"> </div> </div> </div> </div> </section> </section>
.application_section::before { background: #fff none repeat scroll 0 0; bottom: 0; content: ""; height: 100%; position: absolute; right: 50%; top: 0; width: 100%; } .application_section { background: #96588A none repeat scroll 0 0; padding: 80px; position: relative; } section { float: left; width: 100%; } body { font-family: "Assistant",sans-serif; font-size: 16px; color: #333; line-height: 1.42857; } .application_section .nav { bottom: 0; height: 124px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 60px; z-index: 999; } .application_section .nav li { margin-bottom: 10px; text-align: center; width: 60px; } .application_section .nav li a { border-radius: 0; font-size: 33px; font-weight: bold; line-height: 50px; padding: 0; } .application_section .nav li.active a { background: #fff none repeat scroll 0 0; border-color: #96588A; color: #96588A; } .application_section h1 { font-size: 33px; font-weight: bold; margin-bottom: 22px; } .application_section .radius.public { font-size: 15px; font-weight: bold; } .btn-org { background-color: #96588A; border-color: #96588A; color: #fff; } .radius { border-radius: 0 !important; } .para1 { color: #a3a3a3; margin-top: 30px; } .application_section .social_ico { margin-top: 15px; } .social_ico a { border-radius: 100px; display: inline-block; height: 30px; line-height: 30px; margin: 0 5px 0 0; text-align: center; width: 30px; } .application_section .social_ico a { border: 1px solid #c3c3c3; color: #c3c3c3; } .application_section .social_ico { margin-top: 15px; } .app_img img { display: inline; } .application_section .nav li { margin-bottom: 10px; text-align: center; width: 60px; } .application_section .nav li a { background: #fff none repeat scroll 0 0; border: 4px solid #000; border-radius: 0; color: #000; font-size: 33px; font-weight: bold; line-height: 50px; padding: 0; } .app_img img { max-width: 418px; }

Related: See More


Questions / Comments: