<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 ----------> <div class="container"> <div class="row"> <div class="col-sm-3 col-md-2"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#"><span class="badge pull-right">42</span> Articles for You </a> </li> <li><a href="http://www.jquery2dotnet.com">Marketing Articles</a></li> <li><a href="http://www.jquery2dotnet.com">Marketing Avatars</a></li> <li><a href="http://www.jquery2dotnet.com"><span class="badge pull-right">3</span>Favorites (votes)</a></li> </ul> <hr> <br> <a href="#" class="btn btn-danger btn-sm btn-block" role="button">SUBMISSIONS</a> <br> </div> <div class="col-sm-9 col-md-10"> <!-- Nav tabs --> <ul class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab"><span class="glyphicon glyphicon-fire"> </span>Trending</a></li> <li><a href="#profile" data-toggle="tab"><span class="glyphicon glyphicon-inbox"></span> New</a></li> <li><a href="#messages" data-toggle="tab"><span class="glyphicon glyphicon-user"></span> Editor's Picks</a></li> <li><a href="#settings" data-toggle="tab"><span class="glyphicon glyphicon-plus no-margin"> </span></a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane fade in active" id="home"> <div class="list-group"> <a href="#" class="list-group-item"> <span class="glyphicon glyphicon-star-empty"></span><span class="">Americans celebrate Independence Day with leisure and gluttony...</span> <span class="text-muted" style="font-size: 11px;">- Hamburger restaurant challenges competitors to eat burgers</span> <span class="badge">1,210 votes</span> </a><a href="#" class="list-group-item"> <span class="glyphicon glyphicon-star-empty"></span><span class=""> Maxine Waters slams Ben Carson: 'I am going to take his ass apart'...</span> <span class="text-muted" style="font-size: 11px;">- Carson “doesn’t care about people in public housing.”</span> <span class="badge">10 votes</span></a><a href="#" class="list-group-item read"> <span class="glyphicon glyphicon-star"></span><span class="">Dangers hidden inside 'healthy' food...</span> <span class="text-muted" style="font-size: 11px;">- Think vegetable crisps might be a healthier alternative to potato chips? Think again.</span> <span class="badge">10,000 votes</span> <span class="pull-right"><span class="glyphicon glyphicon-fire"> </span></span></a> </div> </div> <div class="tab-pane fade in" id="profile"> <div class="list-group"> <div class="list-group-item"> <span class="text-center">This tab is empty.</span> </div> </div> </div> <div class="tab-pane fade in" id="messages"> ...</div> <div class="tab-pane fade in" id="settings"> This tab is empty.</div> </div> </div> </div> </div>

body{ margin-top:50px;} .nav-tabs .glyphicon:not(.no-margin) { margin-right:10px; } .tab-pane .list-group-item:first-child {border-top-right-radius: 0px;border-top-left-radius: 0px;} .tab-pane .list-group-item:last-child {border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;} .tab-pane .list-group .checkbox { display: inline-block;margin: 0px; } .tab-pane .list-group input[type="checkbox"]{ margin-top: 2px; } .tab-pane .list-group .glyphicon { margin-right:5px; } .tab-pane .list-group .glyphicon:hover { color:#FFBC00; } a.list-group-item.read { color: #222;background-color: #F3F3F3; } hr { margin-top: 5px;margin-bottom: 10px; } .nav-pills>li>a {padding: 5px 10px;} .ad { padding: 5px;background: #F5F5F5;color: #222;font-size: 80%;border: 1px solid #E5E5E5; } .ad a.title {color: #15C;text-decoration: none;font-weight: bold;font-size: 110%;} .ad a.url {color: #093;text-decoration: none;}