<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <div class="container"> <div class="col-sm-2"> <nav class="nav-sidebar"> <ul class="nav tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Lorem ipsum</a></li> <li class=""><a href="#tab2" data-toggle="tab">Dolor asit amet</a></li> <li class=""><a href="#tab3" data-toggle="tab">Stet clita</a></li> </ul> </nav> </div> </div>

.blogShort{ border-bottom:1px solid #ddd;} .add{background: #333; padding: 10%; height: 300px;} .nav-sidebar { width: 100%; padding: 30px 0; border-right: 1px solid #ddd; } .nav-sidebar a { color: #333; -webkit-transition: all 0.08s linear; -moz-transition: all 0.08s linear; -o-transition: all 0.08s linear; transition: all 0.08s linear; } .nav-sidebar .active a { cursor: default; background-color: #0b56a8; color: #fff; } .nav-sidebar .active a:hover { background-color: #E50000; } .nav-sidebar .text-overflow a, .nav-sidebar .text-overflow .media-body { white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .btn-blog { color: #ffffff; background-color: #E50000; border-color: #E50000; border-radius:0; margin-bottom:10px } .btn-blog:hover, .btn-blog:focus, .btn-blog:active, .btn-blog.active, .open .dropdown-toggle.btn-blog { color: white; background-color:#0b56a8; border-color: #0b56a8; } article h2{color:#333333;} h2{color:#0b56a8;} .margin10{margin-bottom:10px; margin-right:10px;} .container .text-style { text-align: justify; line-height: 23px; margin: 0 13px 0 0; font-size: 19px; }