<div class="" id="servicios">
<div class="container">
<div class="row">
<div class="col-lg-12" >
<center>
<br>
<br>
<h3 style="" class="textseccion"><b>Servicios especializados</b></h3>
</center>
</div>
<div class="col-lg-12 text-center">
<div style="height:1px;width:100%;background-color:#00F4DF">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-4">
<img src="./application/assets/img/IconoFacilyRapido215x215.png" class="imgesp" style="width:70%;">
<p class="tituloo">Fácil y rápido<br>
<p class="ptext2">Automatiza las ordenes de tus envíos al integrar tu tienda digital a nuestra plataforma</p><br>
</div>
<div class="col-4">
<img src="./application/assets/img/IconoMejorPrecio215x215.png" class="imgesp" style="width:70%;">
<p class="tituloo">Los mejores precios<br>
<p class="ptext2"> Negociamos por ti para ofrecerte las mejores tarifas del mercado con las mejores paqueterías</p><br>
</div>
<div class="col-4">
<img src="./application/assets/img/IconoEnvíoMundial215x215.png" class="imgesp" style="width:70%;">
<p class="tituloo">Envíos a todo el mundo</p>
<p class="ptext2"> Cualquier tamaño, cualquier peso a cualquier destino</p>
<br>
</div>
</div>
</div>
</div>
</div>
2 respuestas
Las imagenes en bootstrap se hacen responsive usando
.img-fluid. max-width: 100%;
y
height: auto;
así se acomodan al tamaño del elemento que las contiene. Puedes leer más en http://getbootstrap.com/docs/4.1/content/images/
Saludos
-
si pero el texto, en esa documentacion lo encuentro de que, quede de esa manera en horizontal... la imagen ya tiene responsive pero al minimizar se muestra como en la imgen 2 que publique entonces to quiero que quede como la imagen 3, los textos asi en horizontales, ahi en la documentacion que me mandastes encuentro eso amigo?? el 29 nov. 2018 a las 16:56
-
@JuanCarlos la clase
img-fluid
no existe en Bootstrap 3, que es la versión que utiliza el OP el 29 nov. 2018 a las 17:02 -
perdon tienes razon, pero necesito apoyo plis... Bootstrap v4.0.0-beta.2 el 29 nov. 2018 a las 17:15
La manera más simple de resolverlo que se me ocurre es ocultar la imagen de los elementos de la lista en pantallas móviles con d-none d-md-block Después crear una fila con las imágenes tal como deseas mostrarlas en dispositivos móviles (pequeños) y aplicarle la clase d-md-none
Tal como muestras en tu captura, he puesto 6 imágenes distribuidas en la parte superior de la lista para dispositivos pequeños, y he mantenido las tres (una correspondiente a cada lista) de tu código inicial.
El código de la lista quedaría así (omito la parte de html que no afecta a la pregunta/respuesta para focalizar):
<div class="container">
<div class="row d-md-none">
<div class="col-2 first-column">
<img src="./application/assets/img/IconoFacilyRapido215x215.png" class="img-responsive"/>
</div>
<div class="col-2">
<img src="./application/assets/img/IconoFacilyRapido215x215.png" class="img-responsive"/>
</div>
<div class="col-2">
<img src="./application/assets/img/IconoFacilyRapido215x215.png" class="img-responsive"/>
</div>
<div class="col-2">
<img src="./application/assets/img/IconoFacilyRapido215x215.png" class="img-responsive"/>
</div>
<div class="col-2">
<img src="./application/assets/img/IconoFacilyRapido215x215.png" class="img-responsive"/>
</div>
<div class="col-2 last-column">
<img src="./application/assets/img/IconoFacilyRapido215x215.png" class="img-responsive"/>
</div>
</div>
<div class="row">
<div class="col-4">
<img src="./application/assets/img/IconoFacilyRapido215x215.png" class="imgesp d-none d-md-block" style="width:70%;" />
<p class="tituloo">Fácil y rápido</p>
<p class="ptext2">Automatiza las ordenes de tus envíos al integrar tu tienda digital a nuestra plataforma</p><br>
</div>
<div class="col-4">
<img src="./application/assets/img/IconoMejorPrecio215x215.png" class="imgesp d-none d-md-block" style="width:70%;">
<p class="tituloo">Los mejores precios</p>
<p class="ptext2"> Negociamos por ti para ofrecerte las mejores tarifas del mercado con las mejores paqueterías</p><br>
</div>
<div class="col-4">
<img src="./application/assets/img/IconoEnvíoMundial215x215.png" class="imgesp d-none d-md-block" style="width:70%;">
<p class="tituloo">Envíos a todo el mundo</p>
<p class="ptext2"> Cualquier tamaño, cualquier peso a cualquier destino</p>
<br>
</div>
</div>
</div>