<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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-md-3"> <div class="list-group"> <a href="http://www.jquery2dotnet.com" class="list-group-item visitor"> <h3 class="pull-right"> <i class="fa fa-eye"></i> </h3> <h4 class="list-group-item-heading count"> 26</h4> <p class="list-group-item-text"> Priradene ulohy</p> </a><a href="http://www.jquery2dotnet.com" class="list-group-item google-plus"> <h3 class="pull-right"> <i class="fa fa-exclamation-triangle"></i> </h3> <h4 class="list-group-item-heading count"> 3</h4> <p class="list-group-item-text"> Chyby</p> </a><a href="http://www.jquery2dotnet.com" class="list-group-item facebook-like"> <h3 class="pull-right"> <i class="fa fa-users"></i> </h3> <h4 class="list-group-item-heading count"> 2</h4> <p class="list-group-item-text"> Konzultacie</p> </a><a href="http://www.jquery2dotnet.com" class="list-group-item twitter"> <h3 class="pull-right"> <i class="fa fa-tasks"></i> </h3> <h4 class="list-group-item-heading count"> 8</h4> <p class="list-group-item-text"> Ulohy</p> </a><a href="http://www.jquery2dotnet.com" class="list-group-item facebook-like"> <h3 class="pull-right"> <i class="fa fa-check-square-o"></i> </h3> <h4 class="list-group-item-heading count"> 4</h4> <p class="list-group-item-text"> Testovacie priprady</p> </a><a href="http://www.jquery2dotnet.com" class="list-group-item twitter"> <h3 class="pull-right"> <i class="fa fa-refresh"></i> </h3> <h4 class="list-group-item-heading count"> 3</h4> <p class="list-group-item-text"> Zmenova poziadavka</p> </a> </div> </div> <div class="col-md-3"> <div class="list-group"> <a href="http://www.jquery2dotnet.com" class="list-group-item tumblr"> <h3 class="pull-right"> <i class="fa fa-flag"></i> </h3> <h4 class="list-group-item-heading count"> 2</h4> <p class="list-group-item-text"> Vysoka priorita</p> <a href="http://www.jquery2dotnet.com" class="list-group-item linkedin"> <h3 class="pull-right"> <i class="fa fa-flag-o"></i> </h3> <h4 class="list-group-item-heading count"> 18</h4> <p class="list-group-item-text"> Normalna priorita</p> </a></a><a href="http://www.jquery2dotnet.com" class="list-group-item youtube"> <h3 class="pull-right"> <i class="fa fa-flag"></i> </h3> <h4 class="list-group-item-heading count"> 2</h4> <p class="list-group-item-text"> Kriticka priorita</p> </a><a href="http://www.jquery2dotnet.com" class="list-group-item vimeo"> <h3 class="pull-right"> <i class="fa fa-flag"></i> </h3> <h4 class="list-group-item-heading count"> 4</h4> <p class="list-group-item-text"> Nizka priorita</p> </a> </div> </div> </div> </div>

@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"); body { margin-top:20px; } .fa { font-size: 50px;text-align: right;position: absolute;top: 7px;right: 27px;outline: none; } a { transition: all .3s ease;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease; } /* Visitor */ a.visitor i,.visitor h4.list-group-item-heading { color:#E48A07; } a.visitor:hover { background-color:#E48A07; } a.visitor:hover * { color:#FFF; } /* Facebook */ a.facebook-like i,.facebook-like h4.list-group-item-heading { color:#3b5998; } a.facebook-like:hover { background-color:#3b5998; } a.facebook-like:hover * { color:#FFF; } /* Google */ a.google-plus i,.google-plus h4.list-group-item-heading { color:#dd4b39; } a.google-plus:hover { background-color:#dd4b39; } a.google-plus:hover * { color:#FFF; } /* Twitter */ a.twitter i,.twitter h4.list-group-item-heading { color:#00acee; } a.twitter:hover { background-color:#00acee; } a.twitter:hover * { color:#FFF; } /* Linkedin */ a.linkedin i,.linkedin h4.list-group-item-heading { color:#0e76a8; } a.linkedin:hover { background-color:#0e76a8; } a.linkedin:hover * { color:#FFF; } /* Tumblr */ a.tumblr i,.tumblr h4.list-group-item-heading { color:#34526f; } a.tumblr:hover { background-color:#34526f; } a.tumblr:hover * { color:#FFF; } /* Youtube */ a.youtube i,.youtube h4.list-group-item-heading { color:#c4302b; } a.youtube:hover { background-color:#c4302b; } a.youtube:hover * { color:#FFF; } /* Vimeo */ a.vimeo i,.vimeo h4.list-group-item-heading { color:#44bbff; } a.vimeo:hover { background-color:#44bbff; } a.vimeo:hover * { color:#FFF; }