<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"> <div class="row"> <div class="col-lg-12"> <div class="row"> <div class="panel panel-primary"> <div class="panel-heading"> Cadastrados </div> <div class="panel-body"> <div class="well shadow-z-1"> <div class="media"> <a href="#" class="pull-left"> <i class="fa fa-user" style="width: 50px; height: 50px; font-size: 4em;;"></i> <!--<img class="media-object" src="http://placehold.it/50x50">--> </a> <div class="media-body"> <div class="col-lg-8 padding-left-0"> <h4 class="media-heading">Nome do Usuario</h4> </div> <div class="col-lg-4 text-right"> <i class="fa fa-ban text-danger " style=" font-size: 1em;;"> Bloqueado</i> </div> <div class="col-lg-12 padding-left-0"> <ul class="list-inline list-unstyled"> <li><div class="btn-group"> <a class="btn btn-primary btn-xs" href="javascript:void(0)">Opções</a> <a data-toggle="dropdown" class="btn btn-primary btn-xs dropdown-toggle" data-target="#" href="bootstrap-elements.html" aria-expanded="false"><span class="caret"></span><div class="ripple-wrapper"></div></a> <ul class="dropdown-menu"> <li><a href="javascript:void(0)"><i class="fa fa-edit"></i> Editar</a></li> <li><a href="javascript:void(0)"><i class="fa fa-trash"></i> Lixeira</a></li> <li><a href="javascript:void(0)"><i class="fa fa-ban"></i> Bloquear</a></li> <li><a href="javascript:void(0)"><i class="fa fa-check-circle-o"></i> Desbloquear</a></li> <li><a href="javascript:void(0)">Another action</a></li> <li><a href="javascript:void(0)">Something else here</a></li> <li class="divider"></li> <li><a href="javascript:void(0)">Separated link</a></li> </ul> </div></li> <li>|</li> <li><span><i class="glyphicon glyphicon-calendar"></i> 2 days, 8 hours </span></li> <li>|</li> <span><i class="glyphicon glyphicon-comment"></i> 2 comments</span> <li>|</li> <li> <!-- Use Font Awesome http://fortawesome.github.io/Font-Awesome/ --> <span><i class="fa fa-facebook-square"></i></span> <span><i class="fa fa-twitter-square"></i></span> <span><i class="fa fa-google-plus-square"></i></span> </li> </ul> </div> </div> </div> </div> <div class="well shadow-z-1"> <div class="media"> <a href="#" class="pull-left"> <i class="fa fa-user" style="width: 50px; height: 50px; font-size: 4em;;"></i> <!--<img class="media-object" src="http://placehold.it/50x50">--> </a> <div class="media-body"> <div class="col-lg-8 padding-left-0"> <h4 class="media-heading">Nome do Usuario</h4> </div> <div class="col-lg-4 text-right"> <i class="fa fa-ban text-danger " style=" font-size: 1em;;"> Bloqueado</i> </div> <div class="col-lg-12 padding-left-0"> <ul class="list-inline list-unstyled"> <li><div class="btn-group"> <a class="btn btn-primary btn-xs" href="javascript:void(0)">Opções</a> <a data-toggle="dropdown" class="btn btn-primary btn-xs dropdown-toggle" data-target="#" href="bootstrap-elements.html"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="javascript:void(0)"><i class="fa fa-edit"></i> Editar</a></li> <li><a href="javascript:void(0)"><i class="fa fa-trash"></i> Lixeira</a></li> <li><a href="javascript:void(0)"><i class="fa fa-ban"></i> Bloquear</a></li> <li><a href="javascript:void(0)"><i class="fa fa-check-circle-o"></i> Desbloquear</a></li> <li><a href="javascript:void(0)">Another action</a></li> <li><a href="javascript:void(0)">Something else here</a></li> <li class="divider"></li> <li><a href="javascript:void(0)">Separated link</a></li> </ul> </div></li> <li>|</li> <li><span><i class="glyphicon glyphicon-calendar"></i> 2 days, 8 hours </span></li> <li>|</li> <span><i class="glyphicon glyphicon-comment"></i> 2 comments</span> <li>|</li> <li> <!-- Use Font Awesome http://fortawesome.github.io/Font-Awesome/ --> <span><i class="fa fa-facebook-square"></i></span> <span><i class="fa fa-twitter-square"></i></span> <span><i class="fa fa-google-plus-square"></i></span> </li> </ul> </div> </div> </div> </div> <div class="well shadow-z-1"> <div class="media"> <a href="#" class="pull-left"> <i class="fa fa-user" style="width: 50px; height: 50px; font-size: 4em;;"></i> <!--<img class="media-object" src="http://placehold.it/50x50">--> </a> <div class="media-body"> <div class="col-lg-8 padding-left-0"> <h4 class="media-heading">Nome do Usuario</h4> </div> <div class="col-lg-4 text-right"> <i class="fa fa-ban text-danger " style=" font-size: 1em;;"> Bloqueado</i> </div> <div class="col-lg-12 padding-left-0"> <ul class="list-inline list-unstyled"> <li><div class="btn-group"> <a class="btn btn-primary btn-xs" href="javascript:void(0)">Opções</a> <a data-toggle="dropdown" class="btn btn-primary btn-xs dropdown-toggle" data-target="#" href="bootstrap-elements.html"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="javascript:void(0)"><i class="fa fa-edit"></i> Editar</a></li> <li><a href="javascript:void(0)"><i class="fa fa-trash"></i> Lixeira</a></li> <li><a href="javascript:void(0)"><i class="fa fa-ban"></i> Bloquear</a></li> <li><a href="javascript:void(0)"><i class="fa fa-check-circle-o"></i> Desbloquear</a></li> <li><a href="javascript:void(0)">Another action</a></li> <li><a href="javascript:void(0)">Something else here</a></li> <li class="divider"></li> <li><a href="javascript:void(0)">Separated link</a></li> </ul> </div></li> <li>|</li> <li><span><i class="glyphicon glyphicon-calendar"></i> 2 days, 8 hours </span></li> <li>|</li> <span><i class="glyphicon glyphicon-comment"></i> 2 comments</span> <li>|</li> <li> <!-- Use Font Awesome http://fortawesome.github.io/Font-Awesome/ --> <span><i class="fa fa-facebook-square"></i></span> <span><i class="fa fa-twitter-square"></i></span> <span><i class="fa fa-google-plus-square"></i></span> </li> </ul> </div> </div> </div> </div> <div class="well shadow-z-1"> <div class="media"> <a href="#" class="pull-left"> <i class="fa fa-user" style="width: 50px; height: 50px; font-size: 4em;;"></i> <!--<img class="media-object" src="http://placehold.it/50x50">--> </a> <div class="media-body"> <div class="col-lg-8 padding-left-0"> <h4 class="media-heading">Nome do Usuario</h4> </div> <div class="col-lg-4 text-right"> <i class="fa fa-ban text-danger " style=" font-size: 1em;;"> Bloqueado</i> </div> <div class="col-lg-12 padding-left-0"> <ul class="list-inline list-unstyled"> <li><div class="btn-group"> <a class="btn btn-primary btn-xs" href="javascript:void(0)">Opções</a> <a data-toggle="dropdown" class="btn btn-primary btn-xs dropdown-toggle" data-target="#" href="bootstrap-elements.html"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="javascript:void(0)"><i class="fa fa-edit"></i> Editar</a></li> <li><a href="javascript:void(0)"><i class="fa fa-trash"></i> Lixeira</a></li> <li><a href="javascript:void(0)"><i class="fa fa-ban"></i> Bloquear</a></li> <li><a href="javascript:void(0)"><i class="fa fa-check-circle-o"></i> Desbloquear</a></li> <li><a href="javascript:void(0)">Another action</a></li> <li><a href="javascript:void(0)">Something else here</a></li> <li class="divider"></li> <li><a href="javascript:void(0)">Separated link</a></li> </ul> </div></li> <li>|</li> <li><span><i class="glyphicon glyphicon-calendar"></i> 2 days, 8 hours </span></li> <li>|</li> <span><i class="glyphicon glyphicon-comment"></i> 2 comments</span> <li>|</li> <li> <!-- Use Font Awesome http://fortawesome.github.io/Font-Awesome/ --> <span><i class="fa fa-facebook-square"></i></span> <span><i class="fa fa-twitter-square"></i></span> <span><i class="fa fa-google-plus-square"></i></span> </li> </ul> </div> </div> </div> </div> <div class="well shadow-z-1"> <div class="media"> <a href="#" class="pull-left"> <i class="fa fa-user" style="width: 50px; height: 50px; font-size: 4em;;"></i> <!--<img class="media-object" src="http://placehold.it/50x50">--> </a> <div class="media-body"> <div class="col-lg-8 padding-left-0"> <h4 class="media-heading">Nome do Usuario</h4> </div> <div class="col-lg-4 text-right"> <i class="fa fa-ban text-danger " style=" font-size: 1em;;"> Bloqueado</i> </div> <div class="col-lg-12 padding-left-0"> <ul class="list-inline list-unstyled"> <li><div class="btn-group"> <a class="btn btn-primary btn-xs" href="javascript:void(0)">Opções</a> <a data-toggle="dropdown" class="btn btn-primary btn-xs dropdown-toggle" data-target="#" href="bootstrap-elements.html"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="javascript:void(0)"><i class="fa fa-edit"></i> Editar</a></li> <li><a href="javascript:void(0)"><i class="fa fa-trash"></i> Lixeira</a></li> <li><a href="javascript:void(0)"><i class="fa fa-ban"></i> Bloquear</a></li> <li><a href="javascript:void(0)"><i class="fa fa-check-circle-o"></i> Desbloquear</a></li> <li><a href="javascript:void(0)">Another action</a></li> <li><a href="javascript:void(0)">Something else here</a></li> <li class="divider"></li> <li><a href="javascript:void(0)">Separated link</a></li> </ul> </div></li> <li>|</li> <li><span><i class="glyphicon glyphicon-calendar"></i> 2 days, 8 hours </span></li> <li>|</li> <span><i class="glyphicon glyphicon-comment"></i> 2 comments</span> <li>|</li> <li> <!-- Use Font Awesome http://fortawesome.github.io/Font-Awesome/ --> <span><i class="fa fa-facebook-square"></i></span> <span><i class="fa fa-twitter-square"></i></span> <span><i class="fa fa-google-plus-square"></i></span> </li> </ul> </div> </div> </div> </div> <div class="well shadow-z-1"> <div class="media"> <a href="#" class="pull-left"> <i class="fa fa-user" style="width: 50px; height: 50px; font-size: 4em;;"></i> <!--<img class="media-object" src="http://placehold.it/50x50">--> </a> <div class="media-body"> <div class="col-lg-8 padding-left-0"> <h4 class="media-heading">Nome do Usuario</h4> </div> <div class="col-lg-4 text-right"> <i class="fa fa-ban text-danger " style=" font-size: 1em;;"> Bloqueado</i> </div> <div class="col-lg-12 padding-left-0"> <ul class="list-inline list-unstyled"> <li><div class="btn-group"> <a class="btn btn-primary btn-xs" href="javascript:void(0)">Opções</a> <a data-toggle="dropdown" class="btn btn-primary btn-xs dropdown-toggle" data-target="#" href="bootstrap-elements.html"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="javascript:void(0)"><i class="fa fa-edit"></i> Editar</a></li> <li><a href="javascript:void(0)"><i class="fa fa-trash"></i> Lixeira</a></li> <li><a href="javascript:void(0)"><i class="fa fa-ban"></i> Bloquear</a></li> <li><a href="javascript:void(0)"><i class="fa fa-check-circle-o"></i> Desbloquear</a></li> <li><a href="javascript:void(0)">Another action</a></li> <li><a href="javascript:void(0)">Something else here</a></li> <li class="divider"></li> <li><a href="javascript:void(0)">Separated link</a></li> </ul> </div></li> <li>|</li> <li><span><i class="glyphicon glyphicon-calendar"></i> 2 days, 8 hours </span></li> <li>|</li> <span><i class="glyphicon glyphicon-comment"></i> 2 comments</span> <li>|</li> <li> <!-- Use Font Awesome http://fortawesome.github.io/Font-Awesome/ --> <span><i class="fa fa-facebook-square"></i></span> <span><i class="fa fa-twitter-square"></i></span> <span><i class="fa fa-google-plus-square"></i></span> </li> </ul> </div> </div> </div> </div> </div><!-- /end panel-body --> <div class="panel-footer panel-footer-button">Conteudo do footer</div> </div><!-- / end panel--> </div> </div> </div> </div>