"grids"
Bootstrap 3.0.0 Snippet by luchonia

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Rubik Presentation Page

Questions / Comments: