"moiseschat"
Bootstrap 3.3.0 Snippet by devouzer

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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body> <!-- Developer Frontend jugarriza10@gmail.com --> <div id="appchat" class="container"> <div class="row"> <div class="col-sm-3"> <h5>Listado de Usuarios</h5> <div class="usuarios"> <!-- Lista Usuario --> <!-- usuario --> <div class="user"> <div class="avatar"> <div class="status"></div> <img class="img-username" src="https://randomuser.me/api/portraits/men/18.jpg" alt=""> </div> <div class="user-data"> <h5 class="username">Mario Velazques</h5> </div> </div> <!-- end usuario --> <!-- usuario --> <div class="user"> <div class="avatar"> <div class="status"></div> <img class="img-username" src="https://randomuser.me/api/portraits/men/18.jpg" alt=""> </div> <div class="user-data"> <h5 class="username">Mario Velazques</h5> </div> </div> <!-- end usuario --> <!-- usuario --> <div class="user"> <div class="avatar"> <div class="status"></div> <img class="img-username" src="https://randomuser.me/api/portraits/men/18.jpg" alt=""> </div> <div class="user-data"> <h5 class="username">Mario Velazques</h5> </div> </div> <!-- end usuario --> <!-- usuario --> <div class="user"> <div class="avatar"> <div class="status"></div> <img class="img-username" src="https://randomuser.me/api/portraits/men/18.jpg" alt=""> </div> <div class="user-data"> <h5 class="username">Mario Velazques</h5> </div> </div> <!-- end usuario --> <!-- usuario --> <div class="user"> <div class="avatar"> <div class="status"></div> <img class="img-username" src="https://randomuser.me/api/portraits/men/18.jpg" alt=""> </div> <div class="user-data"> <h5 class="username">Mario Velazques</h5> </div> </div> <!-- end usuario --> <!-- usuario --> <div class="user"> <div class="avatar"> <div class="status"></div> <img class="img-username" src="https://randomuser.me/api/portraits/men/18.jpg" alt=""> </div> <div class="user-data"> <h5 class="username">Mario Velazques</h5> </div> </div> <!-- end usuario --> <!-- usuario --> <div class="user"> <div class="avatar"> <div class="status"></div> <img class="img-username" src="https://randomuser.me/api/portraits/men/18.jpg" alt=""> </div> <div class="user-data"> <h5 class="username">Mario Velazques</h5> </div> </div> <!-- end usuario --> <!-- usuario --> <div class="user"> <div class="avatar"> <div class="status"></div> <img class="img-username" src="https://randomuser.me/api/portraits/men/18.jpg" alt=""> </div> <div class="user-data"> <h5 class="username">Mario Velazques</h5> </div> </div> <!-- end usuario --> <!-- Developer Frontend jugarriza10@gmail.com --> <!-- End Lista Usuario --> </div> </div> <div class="col-sm-9"> <div class="chat"> <div class="mensajes"> <div class="mensaje-user"> <div class="avatar"> <div class="status"></div> <img class="img-username" src="https://randomuser.me/api/portraits/men/18.jpg" alt=""> </div> <div class="contenido"> <h6 class="font-weight-bold">Mario Velazques</h6> <p class="font-weight-light">Este texto es una muestra de mensaje</p> </div> </div> </div> <div class="controles"> <input type="text"> <input type="submit" value="Enviar"> </div> </div> </div> </div> </div> <!-- Developer Frontend jugarriza10@gmail.com --> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body> </html>
/* Escenario */ body{ background: #eee; } #appchat{ margin-top: 1.5em; background: #eee; flex-wrap: wrap; align-content: flex-end; } /* USUARIOS */ .usuarios{ margin-top: 1em; margin-bottom: 1em; background: white; width: 100%; height: 500px; padding: 0.3em; overflow: auto; } /* CHAT */ .chat{ margin-top:1em; background: #767776 ; width: 100%; height: 600px; display: flex; flex-direction: column; } .mensajes{ background: white; width: 100%; height: 100%; } .controles{ padding: 1em; display:flex; } input[type="text"]{ width: 80%; padding: 0.4em; } input[type="submit"]{ background: white; color: #767776; width: 20%; font-weight: bold; border: none; } /* MENSAJES */ .mensaje-user{ margin: 0.5em; border-bottom: 1px solid #767776; color: black; display:flex; align-items: center; } .contenido{ padding-left: 2em; } .contenido h6{ font-weight:bold;} .contenido p { font-weight:light;} /* USERNAME */ .user{ display:flex; justify-content: center; align-items: center; } .img-username{ float: left; width: 50px; height: 50px; position:relative; bottom: 1.5em; left: 0.2em; } .status{ position:relative; z-index:0; top: 1.3em; background: #00ce00; width: 10px; height: 40px; } .username{ font-size: 12pt; padding-left: 0.7em; } /* USERNAME SELECCIONABLE */ .user:hover{ background: #eaf1f4; cursor: pointer; }

Related: See More

Navbar With Icons

Questions / Comments: