Bootstrap Snippet social network layout - parte 2 - bootstrap 4 using HTML CSS Bootstrap

"social network layout - parte 2 - bootstrap 4"
Bootstrap 4.1.1 Snippet by tantarico

4.1.1 social

10.1K 10 Fav

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <body> <nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-fbook"> <div class="container c-navbar"> <a class="navbar-brand" href="#"> <svg class="d-block" width="30" height="30" viewBox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"></path><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"></path></svg> </a> </div> </nav> <div class="container-fluid"> <div class="row"> <div class="col-lg-3 offset-fixed f-left"> <div class="side-left"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=4" width="30" alt=""> </div> <div class="ml-3 h7"> <a href="#">Angel Miguel Tantarico ...</a> </div> </div> <div> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> </div> </div> <div class="col-lg-7 offset-lg-3"> <div class="row"> <div class="col-lg-8"> <div class="card my-3"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs nav-fill"> <li class="nav-item"> <a class="nav-link active" href="#">Realizar publicacíon</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Album de fotos/videos</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Video en directo</a> </li> </ul> </div> <div class="card-body py-2"> <div class="d-flex"> <div> <img class="rounded-circle" width="50" src="https://picsum.photos/80/80/?random?image=4"> </div> <div class="col"> <form action="#"> <div class="form-group mb-0"> <label class="sr-only" for="exampleFormControlTextarea1">Example textarea</label> <textarea class="form-control border-0" id="exampleFormControlTextarea1" rows="2" placeholder="¿Que estas pensando, name anomimus?"></textarea> </div> </form> </div> </div> </div> <div class="card-footer p-2"> <div class="d-flex justify-content-between align-items-center"> <div class="col"> <button type="button" class="btn btn-fposts btn-block btn-sm"> <i class="fa fa-list" aria-hidden="true"></i> Lista</button> </div> <div class="col"> <button type="button" class="btn btn-fposts btn-block btn-sm"><i class="fa fa-picture-o" aria-hidden="true"></i> Foto/video</button> </div> <div class="col"> <button type="button" class="btn btn-fposts btn-block btn-sm"><i class="fa fa-user-plus" aria-hidden="true"></i> Etiquetar a a...</button> </div> <div class="col"> <button type="button" class="btn btn-fposts btn-block btn-sm"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></button> </div> </div> </div> </div>  <div class="card my-3"> <div class="card-header bg-white border-0 py-2"> <div class="d-flex justify-content-between"> <div class="d-flex justify-content-between"> <a href="#"> <img class="rounded-circle" src="https://picsum.photos/80/80/?random" width="45" alt="" /> </a> <div class="ml-3"> <div class="h6 m-0"> <a href="#">Revista Automóvil Panamericano</a> </div> <div class="text-muted h8">Hace 2 min <i class="fa fa-globe" aria-hidden="true"></i></div> </div> </div> <div class="dropdown"> <button class="btn btn-link dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> </div> <div class="card-body pt-0 pb-2"> Hola, necesito ayuda para clonar mi HDD a un SSD. Probé Norton Ghost y easyup (nose que nota les dan) lo malo es que estos software al iniciar desde el ssd me pide que repare el sistema. Aiudaaaaa.... </div> <img class="card-img-top rounded-0" src="https://picsum.photos/320/250/?random" alt="Card image cap"> <div class="card-footer bg-white border-0 p-0"> <div class="d-flex justify-content-between align-items-center py-2 mx-3 border-bottom"> <div> </div> <div class="h7"> 3279 <a href="#"> comentarios</a> 44845 veces <a href="#">compartido</a></div> </div> <div class="d-flex justify-content-between align-items-center my-1"> <div class="col"> <button type="button" class="btn btn-fbook btn-block btn-sm"> <i class="fa fa-thumbs-up" aria-hidden="true"></i> Me gusta</button> </div> <div class="col"> <button type="button" class="btn btn-fbook btn-block btn-sm"><i class="fa fa-comment" aria-hidden="true"></i> Comentar</button> </div> <div class="col"> <button type="button" class="btn btn-fbook btn-block btn-sm"><i class="fa fa-share" aria-hidden="true"></i> Compartir</button> </div> </div> </div> </div>   <div class="card my-3"> <div class="card-header bg-white border-0 py-2"> <div class="d-flex justify-content-between"> <div class="d-flex justify-content-between"> <a href="#"> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=2" width="45" alt="" /> </a> <div class="ml-3"> <div class="h6 m-0"> <a href="#">Angel Miguel Tantarico Vela</a> a compartido <a href="#">Cuminidad Programadores peru masters</a> </div> <div class="text-muted h8">Hace 5 min <i class="fa fa-globe" aria-hidden="true"></i></div> </div> </div> <div class="dropdown"> <button class="btn btn-link dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> </div> <div class="card-body pt-0 pb-2"> La fuerza es el único lenguaje que el mal entiende. ¡Derrota monstruos para conseguir muchas recompensas! </div> <img class="card-img-top rounded-0" src="https://picsum.photos/g/320/250/?random" alt="Card image cap"> <div class="card-footer bg-white border-0 p-0"> <div class="d-flex justify-content-between align-items-center py-2 mx-3 border-bottom"> <div> </div> <div class="h7"> 3279 <a href="#"> comentarios</a> 44845 veces <a href="#">compartido</a></div> </div> <div class="d-flex justify-content-between align-items-center my-1"> <div class="col"> <button type="button" class="btn btn-fbook btn-block btn-sm"> <i class="fa fa-thumbs-up" aria-hidden="true"></i> Me gusta</button> </div> <div class="col"> <button type="button" class="btn btn-fbook btn-block btn-sm"><i class="fa fa-comment" aria-hidden="true"></i> Comentar</button> </div> </div> </div> </div>   <div class="card my-3"> <div class="card-header bg-white border-0 py-2"> <div class="d-flex justify-content-between"> <div class="d-flex justify-content-between"> <a href="#"> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=0" width="45" alt="" /> </a> <div class="ml-3"> <div class="h6 m-0"> <a href="#">Revista Automóvil Panamericano</a> </div> <div class="text-muted h8">Hace 2 min <i class="fa fa-globe" aria-hidden="true"></i></div> </div> </div> <div class="dropdown"> <button class="btn btn-link dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> </div> <div class="card-body pt-0 pb-2"> Hola, necesito ayuda para clonar mi HDD a un SSD. Probé Norton Ghost y easyup (nose que nota les dan) lo malo es que estos software al iniciar desde el ssd me pide que repare el sistema. Aiudaaaaa.... </div> <img class="card-img-top rounded-0" src="https://picsum.photos/320/250/?random?image=0" alt="Card image cap"> <div class="card-footer bg-white border-0 p-0"> <div class="d-flex justify-content-between align-items-center py-2 mx-3 border-bottom"> <div> </div> <div class="h7"> 3279 <a href="#"> comentarios</a> 44845 veces <a href="#">compartido</a></div> </div> <div class="d-flex justify-content-between align-items-center my-1"> <div class="col"> <button type="button" class="btn btn-fbook btn-block btn-sm"> <i class="fa fa-thumbs-up" aria-hidden="true"></i> Me gusta</button> </div> <div class="col"> <button type="button" class="btn btn-fbook btn-block btn-sm"><i class="fa fa-comment" aria-hidden="true"></i> Comentar</button> </div> <div class="col"> <button type="button" class="btn btn-fbook btn-block btn-sm"><i class="fa fa-share" aria-hidden="true"></i> Compartir</button> </div> </div> </div> </div>   <div class="card my-3"> <div class="card-header bg-white border-0 py-2"> <div class="d-flex justify-content-between"> <div class="d-flex justify-content-between"> <a href="#"> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=1" width="45" alt="" /> </a> <div class="ml-3"> <div class="h6 m-0"> <a href="#">Angel Miguel Tantarico Vela</a> a compartido <a href="#">Cuminidad Programadores peru masters</a> </div> <div class="text-muted h8">Hace 5 min <i class="fa fa-globe" aria-hidden="true"></i></div> </div> </div> <div class="dropdown"> <button class="btn btn-link dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> </div> <div class="card-body pt-0 pb-2"> La fuerza es el único lenguaje que el mal entiende. ¡Derrota monstruos para conseguir muchas recompensas! </div> <img class="card-img-top rounded-0" src="https://picsum.photos/320/250/?random?image=1" alt="Card image cap"> <div class="card-footer bg-white border-0 p-0"> <div class="d-flex justify-content-between align-items-center py-2 mx-3 border-bottom"> <div> </div> <div class="h7"> 3279 <a href="#"> comentarios</a> 44845 veces <a href="#">compartido</a></div> </div> <div class="d-flex justify-content-between align-items-center my-1"> <div class="col"> <button type="button" class="btn btn-fbook btn-block btn-sm"> <i class="fa fa-thumbs-up" aria-hidden="true"></i> Me gusta</button> </div> <div class="col"> <button type="button" class="btn btn-fbook btn-block btn-sm"><i class="fa fa-comment" aria-hidden="true"></i> Comentar</button> </div> </div> </div> </div>  </div> <div class="col-lg-4"> <div class="card my-3"> <div class="card-body p-2"> <div class="h6">Historias</div>  <div class="mb-3"> <div class="d-flex justify-content-start"> <div class="img-circle"> </div> <div class="h7 ml-2"> <a href="#"> Añade contenido a tu historia</a> <div class="text-muted">Comparte una foto , un video o haz un comentario</div> </div> </div> </div>   <div class="mb-3"> <div class="d-flex justify-content-start"> <div> <img class="rounded-circle" width="45" src="https://picsum.photos/80/80/?random?image=5" alt=""> </div> <div class="h7 ml-2"> <a href="#"> Ana Maria Rodrigues Tafur</a> <div class="text-muted"> Hace 1 Hora</div> </div> </div> </div>   <div class="mb-3"> <div class="d-flex justify-content-start"> <div> <img class="rounded-circle" width="45" src="https://picsum.photos/80/80/?random?image=4" alt=""> </div> <div class="h7 ml-2"> <a href="#"> Ana Maria Rodrigues Tafur</a> <div class="text-muted"> Hace 2 Hora</div> </div> </div> </div>   <div class="mb-3"> <div class="d-flex justify-content-start"> <div> <img class="rounded-circle" width="45" src="https://picsum.photos/80/80/?random?image=2" alt=""> </div> <div class="h7 ml-2"> <a href="#"> Ana Maria Rodrigues Tafur</a> <div class="text-muted"> Hace 2 Hora</div> </div> </div> </div>  <a class="btn btn-link" href="#">Ver más</a> </div> </div> </div> </div> </div> <div class="col-lg-2 offset-fixed f-right"> <div class="side-right"> <div class="h7">CONTACTOS</div>  <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=11" width="30" alt=""> </div> <div class="ml-2 h7"> Pedro Israely Anomi... </div> </div> <div class="state"></div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=10" width="30" alt=""> </div> <div class="ml-2 h7"> Pedro Israely Anomi... </div> </div> <div class="state"></div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=9" width="30" alt=""> </div> <div class="ml-2 h7"> Pedro Israely Anomi... </div> </div> <div class="state"></div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=8" width="30" alt=""> </div> <div class="ml-2 h7"> Clever Mondrago... </div> </div> <div class="h7 text-muted">10 h</div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=7" width="30" alt=""> </div> <div class="ml-2 h7"> Elmer Diaz </div> </div> <div class="h7 text-muted">11 h</div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=6" width="30" alt=""> </div> <div class="ml-2 h7"> Pedro Israely Anomi... </div> </div> <div class="state"></div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=5" width="30" alt=""> </div> <div class="ml-2 h7"> Pedro Israely Anomi... </div> </div> <div class="state"></div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=4" width="30" alt=""> </div> <div class="ml-2 h7"> Pedro Israely Anomi... </div> </div> <div class="state"></div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=2" width="30" alt=""> </div> <div class="ml-2 h7"> Pedro Israely Anomi... </div> </div> <div class="state"></div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=11" width="30" alt=""> </div> <div class="ml-2 h7"> Pedro Israely Anomi... </div> </div> <div class="state"></div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=10" width="30" alt=""> </div> <div class="ml-2 h7"> Pedro Israely Anomi... </div> </div> <div class="state"></div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=9" width="30" alt=""> </div> <div class="ml-2 h7"> Pedro Israely Anomi... </div> </div> <div class="state"></div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=8" width="30" alt=""> </div> <div class="ml-2 h7"> Clever Mondrago... </div> </div> <div class="h7 text-muted">10 h</div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=7" width="30" alt=""> </div> <div class="ml-2 h7"> Elmer Diaz </div> </div> <div class="h7 text-muted">11 h</div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=6" width="30" alt=""> </div> <div class="ml-2 h7"> Pedro Israely Anomi... </div> </div> <div class="state"></div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=5" width="30" alt=""> </div> <div class="ml-2 h7"> Pedro Israely Anomi... </div> </div> <div class="state"></div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=11" width="30" alt=""> </div> <div class="ml-2 h7"> Pedro Israely Anomi... </div> </div> <div class="state"></div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=10" width="30" alt=""> </div> <div class="ml-2 h7"> Pedro Israely Anomi... </div> </div> <div class="state"></div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=9" width="30" alt=""> </div> <div class="ml-2 h7"> Pedro Israely Anomi... </div> </div> <div class="state"></div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=8" width="30" alt=""> </div> <div class="ml-2 h7"> Clever Mondrago... </div> </div> <div class="h7 text-muted">10 h</div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=7" width="30" alt=""> </div> <div class="ml-2 h7"> Elmer Diaz </div> </div> <div class="h7 text-muted">11 h</div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=6" width="30" alt=""> </div> <div class="ml-2 h7"> Pedro Israely Anomi... </div> </div> <div class="state"></div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=5" width="30" alt=""> </div> <div class="ml-2 h7"> Pedro Israely Anomi... </div> </div> <div class="state"></div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=11" width="30" alt=""> </div> <div class="ml-2 h7"> Pedro Israely Anomi... </div> </div> <div class="state"></div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=10" width="30" alt=""> </div> <div class="ml-2 h7"> Pedro Israely Anomi... </div> </div> <div class="state"></div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=9" width="30" alt=""> </div> <div class="ml-2 h7"> Pedro Israely Anomi... </div> </div> <div class="state"></div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=8" width="30" alt=""> </div> <div class="ml-2 h7"> Clever Mondrago... </div> </div> <div class="h7 text-muted">10 h</div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=7" width="30" alt=""> </div> <div class="ml-2 h7"> Elmer Diaz </div> </div> <div class="h7 text-muted">11 h</div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=6" width="30" alt=""> </div> <div class="ml-2 h7"> Pedro Israely Anomi... </div> </div> <div class="state"></div> </div>   <div class="d-flex justify-content-between align-items-center friend-state"> <div class="d-flex"> <div> <img class="rounded-circle" src="https://picsum.photos/80/80/?random?image=5" width="30" alt=""> </div> <div class="ml-2 h7"> Pedro Israely Anomi... </div> </div> <div class="state"></div> </div>  </div> <form action="#"> <div class="form-group mt-2"> <label class="sr-only" for="wzer"></label> <input type="search" class="form-control" name="wzer" id="wzer" placeholder="Buscar"> </div> </form> </div> </div> </div> </body>

body{ background-color: #e9ebee; } .bg-fbook { background-color: #4267b2 !important; padding: .1rem 1rem; } .btn-fbook{ color: #4a4a4a; background-color: #ffffff; border-color: transparent; font-weight: 700; transition: all .5s; } .btn-fbook:hover{ background-color: #f0f0f0; border-color: transparent; } .btn-fposts{ background-color: #f0f0f0; border-color: transparent; border-radius: 5rem; transition: all 0.5s; } .btn-fposts:hover{ background-color: rgba(0,0,0,.05); border-color: transparent; } .h7{ font-size: 0.87rem; font-weight: 600; } .h8{ font-size: 0.78rem; font-weight: 600; } .offset-fixed{ position: fixed; top: 0; bottom: 0; } .f-left{ left: 0 } .f-right{ right: 0; } .side-left{ margin-top: 4rem; margin-left: 8.07rem } .side-right{ margin-top: 4rem; overflow-x: hidden; overflow-y: auto; height: calc(100vh - 7.5rem); } .img-circle{ width: 5rem; height: 3.1rem; background-color: #f7f7f7; border-radius: 50%; border: 1px solid #dddddd; } .state{ width: 0.5rem; height: 0.5rem; background-color: green; border-radius: 50% } .friend-state{ padding: 0.57rem 0.3rem; cursor: pointer; transition: all 0.1s; } .friend-state:hover{ background-color: #f7f7f7; } @media (min-width: 1200px){ .container { max-width: 1125px; } .c-navbar{ margin-left: 7rem !important; } }

Related: See More

Paper Bootstrap Wizard

Paper Bootstrap Wizard

social network layout - bootstrap 4

social network layout - bootstrap 4

Bootstrap 4 Social Network Post - TheMashaBrand

Bootstrap 4 Social Network Post - TheMashaBrand

Bootstrap Social Card

Bootstrap Social Card

Questions / Comments:

Posting GuidelinesFormatting