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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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