1

hola me a dado por aprender bootstrap 4 y ahora se me ha presentado esta dificultad (diseño un blog) quiero ubicar un container con 3 cuadros uno grande que cubra la mitad y los otros dos mas pequeños uno encima del otro pero nose como se hace dejo una imagen ayuda un poco mas

introducir la descripción de la imagen aquí

y este es el código que hasta ahora tengo pero el segundo row ubica mal los cuadros

<div class="container-fluid">
            <div class="row">
                <div class="col-sm-12 col-md-7 b">
                    <h5>...</h5>
                    <p>...</p>
                </div>
                <div class="col-sm-12 col-md-5">
                    <div class="row">
                        <div class="col-sm-12 c"></div>
                        <div class="col-sm-12 d"></div>
                    </div>
                </div>
            </div>
        </div>
1
  • Con que versión de bootstrap estas?
    – Legna
    Commented el 3 abr. 2018 a las 3:13

2 respuestas 2

2

Teniendo en cuenta que quieres hacer una grilla que aparentemente siempre tendrá el mismo layout, puedes agregar simplemente las clases respectivas a la columna de la derecha para que el contenedor "principal" de dicha columna ocupe el 100% del alto h-100 y a los dos subcontenedores, les aplicar el 50% del alto a cada uno con la clase h-50.

.b {
      background-color: red;
    }

    .c {
      background-color: blue;
    }

    .d {
      background-color: black;
    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
            <div class="row">
                <div class="col-sm-12 col-md-7 b">
                    <h5>...</h5>
                    <p>...</p>
                </div>
                <div class="col-sm-12 col-md-5">
                    <div class="row h-100">
                        <div class="col-sm-12 c h-50">..</div>
                        <div class="col-sm-12 d h-50">..</div>
                    </div>
                </div>
            </div>
        </div>

1

Tal vez te sirva algo como esto:

.row{
  
  height: 200px;
  
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
<div class="container-fluid">
    <div class="row">
      <div class="col-sm-6 bg-dark ">
        <h5>Titulo</h5>
        <p>Texto</p>
      </div>
      <div class="col-sm-6 d-flex align-items-stretch">
        <div class="row">
          <div class="col-sm-12 bg-primary ">Cuadro uno</div>
          <div class="col-sm-12 bg-danger">Cuadro dos</div>
        </div>
      </div>
    </div>
  </div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Solo la parte responsiva estaría pendiente.

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.