0

Buenas tengo un problema y es el siguiente: Deseo que en una misma card se pueda visualizar un video y una imagen. Es decir que, la card tenga dentro de manera divida la imagen y el video.

La estructura que tengo es la siguiente

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="row">
                <div class="col col-md-12">
                    <div class="row">
                        <div class="col col-sm-6">

                            <div class="card h-100 border">
                                <div class="col col-sm-6">
                                    <div class="form-check form-check form-check-inline">
                                        <input class="form-check" id="OpcionD" name="OpcionA" value="" type="radio">
                                        <label class="form-check-label ml-1" for="OpcionD">Respuesta A</label>
                                    </div>

                                    <div class="embed embed-responsive embed-responsive-1by1 mt-1">
                                        <iframe class="embed-responsive-item" src="assets/video/2.mp4"
                                            frameborder="0"></iframe>
                                    </div>
                                </div>
                                <div class="col col-sm-6">
                                    <img class="w-100" src="assets/images/opcAMate.jpg" alt="Respuesta A">
                                </div>
                            </div>
                        </div>

y el resultado que me da, es el siguiente:

introducir la descripción de la imagen aquí

No he podido alinearlos en la card ¿Alguna idea de como alinearlos? Se me olvido decir, las imágenes y videos están alojados en mi pc, por si no logran visualizarse, perdón.

2
  • Podrías poner dentro del card <div class="row"> y dentro del row pones las dos columnas Commented el 12 jun. 2020 a las 7:08
  • Gracias. le agregue el row dentro de la card y elimine el card body y con eso quedo. Aunque se me hace raro porque cuando tenia el card-body y agreguaba el row seguia con el mismo comportamiiento.
    – Edgar Gc
    Commented el 12 jun. 2020 a las 22:30

1 respuesta 1

1

En la documentación de bootstrap tienes el ejemplo perfecto para crear una card. Basta con que agregues una row con dos columnas e insertes el contenido.

A continuación te dejo el enlace a este snippet en el cual podrás ver el resultado.

1
  • Gracias por el ejemplo, con ello quedo mas claro y pude acomodar mis items.
    – Edgar Gc
    Commented el 12 jun. 2020 a las 22:31

Tu Respuesta

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

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