<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 ----------> <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <!-- http://fontawesome.io/icons/ http://getbootstrap.com/components/ https://icons8.com/icon/53937/diploma --> <div class="container"> <div class="row"> <h2>Démonstration Concours</h2> </div> <div class="row"> <div class="col-sm-4"> <div class="bloc"> <h3>Mes Informations</h3> <div class="fa-6"> <i class="fa fa-address-book-o "></i> </div> <ul class="list-group"> <li class="list-group-item on">Dossier</li> <li class="list-group-item off">Pièces administratives</li> </ul> <a href="#" class="btn btn-primary"><i class="glyphicon glyphicon-pencil"></i> Compléter</a> </div> </div> <div class="col-sm-4"> <div class="bloc"> <h3>Ma candidature</h3> <div class="fa-6"> <i class="fa fa-file-text "></i> </div> <ul class="list-group"> <li class="list-group-item on">Fiche</li> <li class="list-group-item on">Pièces jointes</li> </ul> <a href="#" class="btn btn-primary"><i class="glyphicon glyphicon-pencil"></i> Compléter</a> </div> </div> <div class="col-sm-4"> <div class="bloc"> <h3>Mes diplômes</h3> <div class="fa-6"> <img src="https://png.icons8.com/diploma/p1em/96" title="Diploma" width="96" height="96"> </div> <ul class="list-group"> <li class="list-group-item off">Diplômes</li> <li class="list-group-item off">Scans</li> </ul> <a href="#" class="btn btn-primary"><i class="glyphicon glyphicon-pencil"></i> Compléter</a> </div> </div> <div class="col-sm-4"> <div class="bloc"> <h3>Autres</h3> <div class="fa-6"> <i class="fa fa-cogs "></i> </div> <ul class="list-group"> <li class="list-group-item off">Autres</li> <li class="list-group-item off">Autres</li> </ul> <a href="#" class="btn btn-primary"><i class="glyphicon glyphicon-pencil"></i> Compléter</a> </div> </div> </div> </div>

.bloc { padding-top:5px; padding-left:5px; padding-right:5px; padding-bottom:15px; margin:2px 2px 2px; text-align: center; background-color: #f3f3f3; } .bloc:hover { background-color: #fff; -moz-box-shadow: 0 0 3px 1px #b0b2ab; -webkit-box-shadow: 0 0 3px 1px #b0b2ab; box-shadow: 0 0 3px 1px #b0b2ab; } .on { color: green; } .off { color: red; } .fa-6 { font-size: 8em; }

$(".on").prepend("<i class=\"glyphicon glyphicon-ok\"></i> "); $(".off").prepend("<i class=\"glyphicon glyphicon-remove\"></i> ");