Buenas tardes,
Necesito de su valiosa ayuda para obtener el código que me permita crear columnas, con el siguiente diseño: 1 imagen en la primera celda y con borde, y en la siguiente celda un texto centrado con borde de la misma proporción a la imagen, en la siguiente celda un texto centrado con borde y en la última celda otra imagen con borde.
Otra sección con tres columnas: 1 imagen en la primera celda y con borde, y en la siguiente celda un texto centrado con borde de la misma proporción a la imagen, en la siguiente celda otra imagen con borde.
El diseño con Bootstrap 3 y responsive, debería quedar algo como lo siguiente:
Columna 1: IMAGEN | Columna 2: TEXTO CENTRADO | Columna 3: TEXTO CENTRADO | Columna 4: IMAGEN ------------------------------------------------------------------------------------ Columna 1: IMAGEN | Columna 2: TEXTO CENTRADO | Columna 3:IMAGEN
En espera de su valioso apoyo.
Muchas gracias. Saludos.
Respuestas
La estructura de la página con Bootstrap 3 se haría de la siguiente manera:
<div class="container"> <div class="row"> <div class="col-sm-3"> IMAGEN </div> <div class="col-sm-3"> TEXTO CENTRADO </div> <div class="col-sm-3"> TEXTO CENTRADO </div> <div class="col-sm-3"> IMAGEN </div> </div> <div class="row"> <div class="col-sm-4"> IMAGEN </div> <div class="col-sm-4"> TEXTO CENTRADO </div> <div class="col-sm-4"> IMAGEN </div> </div> </div>
Lo único que te faltaría es jugar con las propiedades CSS para hacer que el texto esté centrado y tenga la misma altura que la imagen.
@javiereguiluz
Muchas gracias por el aporte @javiereguiluz.
Saludos.
@mayermol