"grids"
Bootstrap 3.0.0 Snippet by luchonia

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="wrapper"> <div class="col-xs-12 box a align-self-center"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLlCi9zTa8vZxh0Q1VvhZosftH5R-rdorOIeMQAQJQc_okR0Mmwg" class="img-responsive"> </div> <div class="col-xs-12 box b"> Centro Medico San Francisco </div> <div class="col-xs-12 box c"> Especialidades mpedicas: Ginecólogo, traumatologo, urologo, medicina genral, pediatría, odontología </div> <div class="col-xs-12 box d"> Av. Alfonso Ugarte 736 - Cerro Colorado </div> <div class="col-xs-12 box e"> Teléfono : 054-203737, 959080333</div> <div class="col-xs-12 box f"> <a href="#"> <span class="glyphicon glyphicon-earphone" style="color:green"></span> </a> </div> <div class="col-xs-12 box g"> <a href="#"> <span class="glyphicon glyphicon-map-marker" style="color:green"></span> </a> </div> <div class="col-xs-12 box separador"> </div> </div>
body { width:60%; margin: 10px; } .wrapper { display: grid; grid-gap: 1px; grid-template-columns: 25% 65% 5% 5%; background-color: #fff; color: #DF3A01; } .box { background-color: #FFFFFF; border:solid 1px #325ecf; color: #fff; border-radius: 2px; padding: 3px; font-size: 80%; } .a { grid-column:1; grid-row: 1/5; } .b { grid-column: 2/5 ; grid-row: 1 ; background-color: #fff; color: #2E64FE; font-size: 110%; } .c { grid-column: 2/5 ; grid-row: 2 ; background-color: #FFF; color: #1C1C1C; } .d { grid-column: 2/5; grid-row: 3; background-color: #FFF; color: #1C1C1C; } .e { grid-column: 2; grid-row: 4; background-color: #FFF; color: #1C1C1C; } .f { grid-column: 3; grid-row: 4; background-color: #FFF; font-size: 140%; border:solid 1px #1C1C1C; } .g { grid-column: 4; grid-row: 4; background-color: #FFF; font-size: 140%; border:solid 1px #1C1C1C; } .separador { grid-column: 1/5; grid-row: 5; background-color: #31B404; }

Related: See More


Questions / Comments: