0

me gustaría poder posicionar mi codigo similar a esto: introducir la descripción de la imagen aquí

Pero por mucho que le doy vueltas no consigo hacerlo correctamente.

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-2  col-md-offset-1">
<img src="img.png" alt="img" id="img" />
</div>
<div class="col-md-5 offset-md-1 text-center">
<p>Descripcion de la imagen</p>
</div>
<div class="col-md-2 offset-md-2 text-center">
<a class="btn btn-dark me-2" href="#" role="button" target="_blank"> boton</a>
</div>
<div class="col-md-2 offset-md-2 text-center">
<a class="btn btn-dark me-2" href="#" role="button" target="_blank"> boton</a>
</div>
</div>
</div>

2 respuestas 2

2

No entiendo muy bien por donde quieres dejar la imagen, por lo que la he quitado.
Pero para el resto, puedes guiarte con el grid-system de bootstrap.
Basta con asignar correctamente valores para obtener el resultado esperado.

Ahora bastará con que tu corrijas a lo que realmente quieras mostrar.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<div class="container">
  <div class="row" style="height: 10vh">
  </div>
  <div class="row">
    <div class="col">
    </div>
    <div class="col-3"><img src="https://loremflickr.com/cache/resized/65535_51056320928_3eb1e28ae8_320_240_nofilter.jpg" alt="img" id="img" width="100px" height="100px" />
    </div>
    <div class="col-3">
      Descripcion de la imagen
    </div>
    <div class="col">
    </div>
  </div>
</div>
<div class="row">
  <div class="col">
  </div>
  <div class="col-10 text-center">
    <a class="btn btn-dark" href="#" role="button" target="_blank"> boton</a>
    <a class="btn btn-dark" href="#" role="button" target="_blank"> boton</a>
  </div>
  <div class="col">
  </div>
</div>
</div>

6
  • la imagen es el cuadrado que se ve en la imagen de ejemplo
    – Sara11
    el 24 may. 2021 a las 16:26
  • Si, pero donde la quieres, sobre la descripción, debajo de esta, a la izquierda, detras ??
    – Excorpion
    el 24 may. 2021 a las 16:29
  • no no, solo al lado igual que en el ejemplo que ocupe el rectangulo, el cuadrado dibujado, al lado izquierdo de la descripcion y los botones es la imagen
    – Sara11
    el 24 may. 2021 a las 16:42
  • Algo aproximado a la edicion actual ?
    – Excorpion
    el 24 may. 2021 a las 16:50
  • Muchas gracias por ayudarme ^^, si era eso jejejeje me ha servido mucho tambien tu respuesta, entre los dos he conseguido colocarlo bien!
    – Sara11
    el 24 may. 2021 a las 18:37
0

He realizado algunos cambios significativos en tú código, como dejar dos div class="col", y dentro de la segunda columna agregar dos class="row" , uno para el texto y otro para los botones(btn-group).

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<div class="container">
<br>
<div class="row">
<div class="col">
<img text-right style="height:100px;width: 100%; max-width: 250px; min-height: 70px; height: auto;" src="https://www.w3schools.com/html/pic_trulli.jpg" alt="img" id="img" />
</div>
<div class="col text-left">
<div class="row">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ....
</div>
<div class="row">
<div class="btn-group">
<a class="btn btn-dark me-2" href="#" role="button" target="_blank"> boton</a>
<a class="btn btn-dark me-2" href="#" role="button" target="_blank"> boton</a>
</div>
</div>
</div>
</div>

2
  • Muchisimas gracias por ayudarme!! esto era justo lo que necesitaba :)
    – Sara11
    el 24 may. 2021 a las 18:37
  • Es un placer poder ayudarle amigo @WinterIsback el 24 may. 2021 a las 18:39

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.