0

ejemplo de lo que no puedo realizar

<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 2

0

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

3
  • 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
0

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.