<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 ----------> <div class="container"> <div class="col-md-3"></div> <div class="col-md-9"> <div class="row"> <h2>Boostrap tiles</h2> </div> <div class="row tiles"> <div class="col-md-4"> <div class="modulo-cuadrado valor1"> <div class="m-v-arriba"> <span class="img"></span> </div> <div class="m-v-abajo"> <p>Respeto a las personas</p> </div> </div> </div> <div class="col-md-4"> <div class="modulo-cuadrado valor2"> <div class="m-v-arriba"> <span class="img"></span> </div> <div class="m-v-abajo"> <p>Responsabilidad por los resultados</p> </div> </div> </div> <div class="col-md-4"> <div class="modulo-cuadrado valor3"> <div class="m-v-arriba"> <span class="img"></span> </div> <div class="m-v-abajo"> <p>Toma de decisiones éticas, ágiles y disciplinadas</p> </div> </div> </div> </div> <div class="row tiles"> <div class="col-md-4"> <div class="modulo-cuadrado valor4"> <div class="m-v-arriba"> <span class="img"></span> </div> <div class="m-v-abajo"> <p>Pasión por innovar y crear soluciones</p> </div> </div> </div> <div class="col-md-4"> <div class="modulo-cuadrado valor5"> <div class="m-v-arriba"> <span class="img"></span> </div> <div class="m-v-abajo"> <p>Enfoque en el cliente</p> </div> </div> </div> <div class="col-md-4"> <div class="modulo-cuadrado valor6"> <div class="m-v-arriba"> <span class="img"></span> </div> <div class="m-v-abajo"> <p>Trabajo en equipo</p> </div> </div> </div> </div> </div> </div>

.tiles{} .tiles .col-md-4{ padding-right: 5px; padding-left: 5px; padding-bottom:5px; padding-top:5px; position:relative; } .modulo-cuadrado { top: 0; bottom: 0; left: 0; right: 0; height: 250px; font-size: 30px; line-height: 100%; } .valor1{ background-color:#62A8D9; color:#243E50; } .valor2{ background-color:#66B266; color:#264226; } .valor3{ background-color:#EB4F40; color:#571D18; } .valor4{ background-color:#EC94CA; color:#57374A; } .valor5{ background-color:#9C7BB5; color:#3A2D43; } .valor6{ background-color:#FFD349; color:#5E4E1B; } .m-v-arriba{ float:left; width:100%; position:relative; padding:20px 0; height:40%; } .m-v-abajo{ float:left; width:100%; height:60%; padding:12px; position:relative; display:table; } .m-v-abajo p{ display:table-cell; vertical-align:middle; } span.img{ display:block; width:50px; height:50px; background:#000; position:absolute; top:20px; left:0; bottom:0; right:0; margin:auto; }