0

Necesito hacer un diseño no muy complejo en la cual, el ejemplo 2 y ejemplo 3 debe estar uno arriba de otro. Me explico a continuación:

card ejemplo 1: tiene un alto de 600

card ejemplo 2 y 3: tiene un alto de 300

La idea es que la tarjeta de ejemplo 1 quede sola con su dimensión de 600, mientras que la 2 y 3 que tienen dimensión de 300, queden una arriba del otro, para que complete el alto de 600, no es la idea que la tarjeta de ejemplo 3 quede debajo del todo. La siguiente imagen ilustra de manera más detallada. introducir la descripción de la imagen aquí

A continuación muestro mi código

         <div class="row">
                <div class="card col-sm-4">
                    <div class="card-header " height="600">
                        <h4 class="">Ejemplo 1</h4>
                    </div>
                    <div class="card-body">
                        <div class="container-fluid">
                            <div class="row justify-content-center">
                                    <canvas  id="chart" height="600" ></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                            <div class="card col-sm-8" height="300">
                    <div class="card-header " >
                        <h4 class="">ejemplo 2</h4>
                    </div>
                    <div class="card-body">
                        <div class="container-fluid">
                            <div class="row justify-content-center">
                                  <!--  <canvas  id="chart" height="300" ></canvas> -->
                            </div>
                        </div>
                    </div>
                </div>
                                
                                <div class="card col-sm-8" height="300">
                    <div class="card-header " >
                        <h4 class="">ejemplo 3</h4>
                    </div>
                    <div class="card-body">
                        <div class="container-fluid">
                            <div class="row justify-content-center">
                                   <!-- <canvas  id="chart" height="300" ></canvas> -->
                            </div>
                        </div>
                    </div>
                </div>
</div>

Cada tarjeta tendrá su gráfico correspondiente pero ese es otro tema, solo me interesa el diseño.

2
  • Indica la versión de bootstrap
    – javdromero
    Commented el 10 nov. 2023 a las 19:05
  • No olvides además agregar en el snippet la versión de bootstrap que estás utilizando.
    – padaleiana
    Commented el 10 nov. 2023 a las 19:34

1 respuesta 1

0

vas bien, solo recuerda el esquema de la pagina web, en tu ejemplo requieres un contenedor general, y en este se dividira en 2, el 1ro contendra el div card ejemplo 1, y el 2do contenedor tendra el div card ejemplo 2, y seguido del div card ejemplo 3, te anexo la correccion junto con algun comentario para que ubiques los divs que comente , use bootstrap 5.2 pero deberia servir con otras versiones

    <!-- Bootstrap CSS v5.2.1 -->
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
      crossorigin="anonymous"
    />
    
    
 <div class="row">
        <!-- primer div individual -->
        <div class="card col-sm-4">
          <div class="card-header" height="600">
            <h4 class="">Ejemplo 1</h4>
          </div>
          <div class="card-body">
            <div class="container-fluid">
              <div class="row justify-content-center">
                <canvas id="chart" height="600"></canvas>
              </div>
            </div>
          </div>
        </div>

        <!-- segundo div que incluyen 2 -->

        <div class="card col-sm-8" height="600">
           <!--  segundo div -->
          <div class="card col-sm-8" height="300">
            <div class="card-header">
              <h4 class="">ejemplo 2</h4>
            </div>
            <div class="card-body">
              <div class="container-fluid">
                <div class="row justify-content-center">
                  <canvas id="chart" height="300"></canvas>
                </div>
              </div>
            </div>
          </div>
          <!-- tercer div -->

          <div class="card col-sm-8" height="300">
            <div class="card-header">
              <h4 class="">ejemplo 3</h4>
            </div>
            <div class="card-body">
              <div class="container-fluid">
                <div class="row justify-content-center">
                  <canvas id="chart" height="300"></canvas>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        
            <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
      integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
      crossorigin="anonymous"
    ></script>

    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
      integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz"
      crossorigin="anonymous"
    ></script>

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.