"Table new user"
Bootstrap 3.3.0 Snippet by VHTrung

Post to Facebook Tweet this

<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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <div class="section"> <div class="container"> <div class="row"> <div class="col-md-12"> <h1 class="text-center">Usuarios</h1> </div> </div> </div> </div> <div class="section"> <div class="container"> <div class="row"> <div class="col-md-12"> <ul class="breadcrumb"> <li> <a href="#">Inicio</a> </li> <li> <a href="#">Panel de control</a> </li> <li class="active">Usuarios</li> </ul> </div> </div> <div class="row"> <div class="col-md-12 well"> <a class="btn btn-primary" data-toggle="modal" data-target="#usuario"><i class="fa fa-fw -square -circle fa-plus-square"></i> Usuario nuevo</a> </div> </div> </div> </div> <div class="section"> <div class="container"> <div class="row"> <div class="col-md-12"> <table class="table table-hover table-striped"> <tbody> <tr> <td> <a href="#"><i class="-alt fa fa-2x fa-eye fa-fw"></i></a> </td> <td> <h4> <b>Asistente de sistemas</b> </h4> <p>@ramonvillaw</p> </td> <td> <img src="http://pingendo.github.io/pingendo-bootstrap/assets/user_placeholder.png" class="img-circle" width="60"> </td> <td> <h4> <b>Ramón Villa Awad</b> </h4> <a href="mailto:ramonvillaw@gmail.com">ramonvillaw@gmail.com</a> </td> <td>2 años</td> <td> <div class="btn-group"> <button class="btn btn-default" value="left" type="button"> <i class="fa fa-fw s fa-remove"></i>Eliminar</button> <button class="btn btn-default" value="right" type="button"> <i class="fa fa-fw fa-cog"></i>Configurar</button> </div> </td> </tr> <tr> <td> <a href="#"><i class="fa fa-2x fa-fw fa-eye-slash"></i></a> </td> <td> <h4> <b>Supervisora</b> </h4> <p>@claudiaramos</p> </td> <td> <img src="http://pingendo.github.io/pingendo-bootstrap/assets/user_placeholder.png" class="img-circle" width="60"> </td> <td> <h4> <b>Claudia Ramos</b> </h4> <a href="mailto:claudia@mail.com">claudia@mail.com</a> </td> <td>3 años</td> <td> <div class="btn-group"> <button class="btn btn-default" value="left" type="button"> <i class="fa fa-fw s fa-remove"></i>Eliminar</button> <button class="btn btn-default" value="right" type="button"> <i class="fa fa-fw fa-cog"></i>Configurar</button> </div> </td> </tr> <tr> <td> <a href="#"><i class="fa fa-2x fa-fw fa-eye"></i></a> </td> <td> <h4> <b>Gerente de capacitación</b> </h4> <p>@anaojeda</p> </td> <td> <img src="http://pingendo.github.io/pingendo-bootstrap/assets/user_placeholder.png" class="img-circle" width="60"> </td> <td> <h4> <b>Ana Isabel Ojeda</b> </h4> <a href="mailto:ana@mail.com">ana@mail.com</a> </td> <td>1 mes</td> <td> <div class="btn-group"> <button class="btn btn-default" value="left" type="button"> <i class="fa fa-fw s fa-remove"></i>Eliminar</button> <button class="btn btn-default" value="right" type="button"> <i class="fa fa-fw fa-cog"></i>Configurar</button> </div> </td> </tr> <tr> <td> <a href="#"><i class="fa fa-2x fa-fw -alt fa-eye-slash"></i></a> </td> <td> <h4> <b>Director de Recursos Humanos</b> </h4> <p>@Carlos Enciso</p> </td> <td> <img src="http://pingendo.github.io/pingendo-bootstrap/assets/user_placeholder.png" class="img-circle" width="60"> </td> <td> <h4> <b>Carlos Enciso</b> </h4> <a href="mailto: carlos@mail.com"> carlos@mail.com</a> </td> <td>5 años</td> <td> <div class="btn-group"> <button class="btn btn-default" value="left" type="button"> <i class="fa fa-fw s fa-remove"></i>Eliminar</button> <button class="btn btn-default" value="right" type="button"> <i class="fa fa-fw fa-cog"></i>Configurar</button> </div> </td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="fade modal" id="usuario"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h2 class="modal-title" id="myModalLabel">Nuevo Usuario</h2> </div> <div class="modal-body"> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <!-- Prepended text--> <div class="form-group"> <label class="col-md-4 control-label" for="prependedtext">Usuario</label> <div class="col-md-5"> <div class="input-group"> <span class="input-group-addon">@</span> <input id="prependedtext" name="prependedtext" class="form-control" placeholder="Nombre de usuario" type="text" required=""> </div> </div> </div> <!-- Prepended text--> <div class="form-group"> <label class="col-md-4 control-label" for="nombre">Nombre</label> <div class="col-md-5"> <div class="input-group"> <span class="input-group-addon"> <i class="fa fa-user"></i> </span> <input id="nombre" name="nombre" class="form-control" placeholder="Nombre Completo" type="text" required=""> </div> </div> </div> <!-- Appended Input--> <div class="form-group"> <label class="col-md-4 control-label" for="email">e-mail</label> <div class="col-md-5"> <div class="input-group"> <input id="email" name="email" class="form-control" placeholder="Correo Electrónico" type="email" required=""> <span class="input-group-addon"> <i class="fa fa-envelope"></i> </span> </div> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="departamento">Departamento</label> <div class="col-md-5"> <select id="departamento" name="departamento" class="form-control"> <option value="1">Sistemas</option> <option value="2">Ama de Llaves</option> <option value="3">Recursos Humanos</option> <option value="4">Contraloría</option> <option value="5">Gerencia</option> </select> </div> </div> <!-- File Button --> <!-- Password input--> <div class="form-group"> <label class="col-md-4 control-label" for="password">Contraseña</label> <div class="col-md-5"> <input id="password" name="password" type="password" placeholder="Contraseña" class="form-control input-md" required=""> </div> <button type="submit" class="btn btn-primary"> <i class="fa fa-fw fa-save"></i>Guardar</button> </div> <!-- Button --> </fieldset> </form> </div> </div> </div> </div> <div class="navbar navbar-default navbar-fixed-top navbar-inverse"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-ex-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand"><img height="20" alt="Brand" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAA81BMVEX///9VPnxWPXxWPXxWPXxWPXxWPXxWPXz///9hSYT6+vuFc6BXPn37+vz8+/z9/f2LeqWMe6aOfqiTg6uXiK5bQ4BZQX9iS4VdRYFdRYJfSINuWI5vWY9xXJF0YJR3Y5Z4ZZd5ZZd6Z5h9apq0qcW1qsW1q8a6sMqpnLyrn76tocCvpMGwpMJoUoprVYxeRoJjS4abjLGilLemmbrDutDFvdLPx9nX0eDa1OLb1uPd1+Td2OXe2eXh3Ofj3+nk4Orl4evp5u7u7PLv7fPx7/T08vb08/f19Pf29Pj39vn6+fuEcZ9YP35aQn/8/P1ZQH5fR4PINAOdAAAAB3RSTlMAIWWOw/P002ipnAAAAPhJREFUeF6NldWOhEAUBRvtRsfdfd3d3e3/v2ZPmGSWZNPDqScqqaSBSy4CGJbtSi2ubRkiwXRkBo6ZdJIApeEwoWMIS1JYwuZCW7hc6ApJkgrr+T/eW1V9uKXS5I5GXAjW2VAV9KFfSfgJpk+w4yXhwoqwl5AIGwp4RPgdK3XNHD2ETYiwe6nUa18f5jYSxle4vulw7/EtoCdzvqkPv3bn7M0eYbc7xFPXzqCrRCgH0Hsm/IjgTSb04W0i7EGjz+xw+wR6oZ1MnJ9TWrtToEx+4QfcZJ5X6tnhw+nhvqebdVhZUJX/oFcKvaTotUcvUnY188ue/n38AunzPPE8yg7bAAAAAElFTkSuQmCC"></a> </div> <div class="collapse navbar-collapse" id="navbar-ex-collapse"> <ul class="nav navbar-nav navbar-right"> <li> <a href="#"><i class="fa fa-fw fa-dashboard"></i> Configuración</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ramón Villa <span class="caret"></span></a> <ul class="dropdown-menu"> <li> <a href="#">Action</a> </li> <li> <a href="#">Another action</a> </li> <li> <a href="#">Something else here</a> </li> <li role="separator" class="divider"></li> <li> <a href="#">Separated link</a> </li> </ul> </li> </ul> </div> </div> </div>

Questions / Comments: