<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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" style="margin-top:50px"> <div class="well"> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/75x75"> </a> <div class="media-body"> <div class="col-md-10"> <h4 class="media-heading">YIFY</h4> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> <span class="">Active</span> </div> </div> <ul class="list-inline list-unstyled"> <li><span><i class="glyphicon glyphicon-transfer"></i> 340Kb/s </span></li> <li>|</li> <span><i class="glyphicon glyphicon-file"></i> Movies</span> </ul> </div> <div class="col-md-2"> <div class="icons-options"> <a href=""> <i class="glyphicon glyphicon-info-sign"></i> </a> <a href=""> <i class="glyphicon glyphicon-ok-sign"></i> </a> <a href=""> <i class="glyphicon glyphicon-trash"></i> </a> </div> </div> </div> </div> <hr> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/75x75"> </a> <div class="media-body"> <div class="col-md-10"> <h4 class="media-heading">EZTV</h4> <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width :85%"> <span class="">85% Complete</span> </div> </div> <ul class="list-inline list-unstyled"> <li><span><i class="glyphicon glyphicon-transfer"></i> 30Kb/s </span></li> <li>|</li> <span><i class="glyphicon glyphicon-file"></i> Shows</span> </ul> </div> <div class="col-md-2"> <div class="icons-options"> <a href=""> <i class="glyphicon glyphicon-info-sign"></i> </a> <a href=""> <i class="glyphicon glyphicon-remove-sign"></i> </a> <a href=""> <i class="glyphicon glyphicon-trash"></i> </a> </div> </div> </div> </div> <hr> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/75x75"> </a> <div class="media-body"> <div class="col-md-10"> <h4 class="media-heading">Kickass</h4> <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 5%"> <span class="">5% Complete</span> </div> </div> <ul class="list-inline list-unstyled"> <li><span><i class="glyphicon glyphicon-transfer"></i> 0Kb/s </span></li> <li>|</li> <span><i class="glyphicon glyphicon-file"></i> Movies | Anime | shows</span> </ul> </div> <div class="col-md-2"> <div class="icons-options"> <a href=""> <i class="glyphicon glyphicon-info-sign"></i> </a> <a href=""> <i class="glyphicon glyphicon-ok-sign"></i> </a> <a href=""> <i class="glyphicon glyphicon-trash"></i> </a> </div> </div> </div> </div> <hr> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/75x75"> </a> <div class="media-body"> <div class="col-md-10"> <h4 class="media-heading">Haruhichan</h4> <div class="progress"> <div class="progress-bar progress-bar-primary progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 39%"> <span class="">39% Complete</span> </div> </div> <ul class="list-inline list-unstyled"> <li><span><i class="glyphicon glyphicon-transfer"></i> 67Kb/s </span></li> <li>|</li> <span><i class="glyphicon glyphicon-file"></i> Anime</span> </ul> </div> <div class="col-md-2"> <div class="icons-options"> <a href=""> <i class="glyphicon glyphicon-info-sign"></i> </a> <a href=""> <i class="glyphicon glyphicon-ok-sign"></i> </a> <a href=""> <i class="glyphicon glyphicon-trash"></i> </a> </div> </div> </div> </div> </div> </div>

.media { height:auto; height:100px; } .icons-options{ padding: 33px 10px; font-size: 30px; } .icons-options .glyphicon{ padding:2px; } .icons-options a{ text-decoration:none; } hr{ border-bottom: 1px solid #999; }