0

hola comunidad tengo una duda no se mucho de bootstrap quiero alinear una imagen dentro de una lista de elementos pero no se que clases usar o que css

este es mi código:

<div class="container">
<h2 class="text-center">Detalles de Artículos Seleccionados</h2>

    <ul class="list-group">

        <li class="list-group-item list-group-item-action flex-column align-items-start active">
            <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">Productos dentro del Carrito</h5>          
            </div>       
        </li>

        <li class="list-group-item list-group-item-action flex-column align-items-start">
            <img src="/Img/confirmedmail.png"/>
            <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1" style="color:#004B56;">F11407 CINTA DE EMPAQUE TRANSAPARENTE 48MMX50M TP-1060 WESTON</h5>
                <small class="text-muted">3 days ago</small>
                <button class="btn btn-info"><i class="oi oi-cart"></i> Volver a Comprar</button>
            </div>
            <p class="mb-1">CINTA DE EMPAQUE TRANSPARENTE 48mm X 150M ($ x pza, caja c/36)</p>
            <small class="text-muted">$499.10 x 1 unidad</small>
        </li>
    </ul>
 </div> 

asi se ve en pantalla introducir la descripción de la imagen aquí

quiero que quede alineada de esta manera, la imagen a la izquierda y el texto a la derecha aun lado de la imagen: introducir la descripción de la imagen aquí

1 respuesta 1

1

He refactorizado bastante tu código utilizando cards de Bootstrap y utilizando la clase row no-gutters para ver qué te parece esta visualización. La puedes personalizar a tu gusto:

<div class="container">
<h2 class="text-center">Detalles de Artículos Seleccionados</h2>
<h5 class="mb-1">Productos dentro del Carrito</h5>
<div class="card">
    <div class="row no-gutters">
        <div class="card-header">
            <img src="/Img/confirmedmail.png"/>
        </div>

        <div class="card-body">
                <h5 style="color:#004B56;">F11407 CINTA DE EMPAQUE TRANSAPARENTE 48MMX50M TP-1060 WESTON</h5>
                <small class="text-muted">3 days ago</small>
                <p>CINTA DE EMPAQUE TRANSPARENTE 48mm X 150M ($ x pza, caja c/36)</p>
                <small class="text-muted">$499.10 x 1 unidad</small>
                <button class="btn btn-info"><i class="oi oi-cart"></i> Volver a Comprar</button>
        </div>
    </div>
</div>

A mi parecer se ve mucho más limpio el código sin usar tantas clases de Bootstrap y es altamente personalizable. Te recomiendo que leas la documentación de las cards de Bootstrap para que investigues sus posibilidades. Espero que te sirva, un saludo.

1
  • 1
    muchas gracias por tu ayuda y tiempo si me dio una idea de como hacerlo pero la verdad se movió un poco el diseño al recorrer un ciclo foreach y batalle para ponerle una cabecera y un footer fuera del card pero ya quedo !! el 24 jun. 2020 a las 22:04

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.