1

Espero hoy sea un día lleno de bendiciones para todos ustedes.

Les comento amigos que estoy tomando clases de Bootstrap y como reto personal quiero lograr este diseño.

diseño

Donde los contenedores amarillos serían las "columnas invisibles", las cuales estoy manejando con la clase .d-none que las oculta.

Los contenedores grises superiores tienen el mismo ancho.

Creo que esty muy cerca de lograrlo pero por alguna razon mi código no se ve como la imagen. Que fallas tengo? Esta es la forms correcta de hacerlo? Como juntaría los bloques grises?

Este es mi código:

.caja{  
  height: 50px;
  border-radius: 3rem;
  margin-top: 5px;
  margin-bottom: 5px; 
}

.gris{
  background: grey;
}

.ylw{
  background: yellow;
}
  <div class="container">
    <div class="row">
    
    <div class="col-md-3 caja gris"></div>
    <div class="col-md-3 caja gris"></div>
    <div class="col-md-3 caja gris"></div>
    <div class="col-md-3 caja gris"></div>      
        
    <div class="col-md-3 caja ylw d-none"></div>
    <div class="col-md-3 caja gris"></div>
    <div class="col-md-3 caja gris"></div>
    <div class="col-md-3 caja ylw d-none"></div>
       
    <div class="col-md-3 caja gris"></div>
    <div class="col-md-3 caja ylw d-none"></div>
    <div class="col-md-3 caja gris"></div>
    <div class="col-md-3 caja gris"></div>
      
    <div class="col-md-3 caja ylw d-none"></div>
    <div class="col-md-3 caja ylw d-none"></div>
    <div class="col-md-3 caja ylw d-none"></div>
    <div class="col-md-3 caja gris"></div>
      
    </div>
 </div>
      

Mil gracias hermanos!

9
  • te sugiero que uses tambien los cierres del div class "row", recuerda que cada row "fila" posee doce columnas o deben sumar ello.. Commented el 29 mar. 2019 a las 21:40
  • Tu código es sólo con fines didácticos? Podría modificar el código para que se vea como la imagen? Commented el 29 mar. 2019 a las 21:41
  • 2
    @ConceptDev no tienes 16 filas, tienes 16 contenedores que ocupan 48 columnas de 12 disponibles. Revisa: getbootstrap.com/docs/4.3/layout/grid Commented el 29 mar. 2019 a las 21:46
  • 1
    dentro de la documentacion explica que "d-none" oculta para todo tamaño de pantalla , si deseas especificar para cierto tamaño usa como lo dice la documentacion: getbootstrap.com/docs/4.0/utilities/display/#hiding-elements Commented el 29 mar. 2019 a las 21:56
  • 2
    Trabaja con offsets en las columnas, esa es la forma indicada de hacerlo Commented el 29 mar. 2019 a las 22:01

3 respuestas 3

2

Usando bootstrap debería ser así

<div class="container">
    <div class="row">
        <div class="col-md-3  caja gris"></div>
        <div class="col-md-3  caja gris"></div>
        <div class="col-md-3  caja gris"></div>
        <div class="col-md-3  caja gris"></div>
    </div>
    <div class="row">
        <div class="offset-md-3 col-md-6 caja gris"></div>
    </div>
    <div class="row">
        <div class="col-md-3  caja gris"></div>
        <div class="offset-md-3 col-md-6"></div>
    </div>
    <div class="row">
        <div class="offset-md-9 col-md-3  caja gris"></div>
    </div>
</div>
5
  • se me fueron esos rows en mi respuesta xD Commented el 29 mar. 2019 a las 21:51
  • Me gusta tu respuesta, pero no termino de entender el funcionamiento de la clase offset
    – ConceptDev
    Commented el 30 mar. 2019 a las 1:10
  • Son columnas con la clase .d-none?
    – ConceptDev
    Commented el 30 mar. 2019 a las 1:10
  • 2
    Básicamente la clase .col-md-offset-* para desplazar cualquier columna hacia su derecha. Estas clases aumentan el tamaño del margen izquierdo de la columna en una cantidad equivalente a esas * columnas. La clase .col-md-offset-4 por ejemplo desplaza la columna una anchura equivalente a 4 columnas. @ConceptDev Commented el 1 abr. 2019 a las 20:33
  • Gracias por su respuesta hermano. Bendiciones
    – ConceptDev
    Commented el 3 abr. 2019 a las 13:12
2

Aqui lo hice, espero te sirva :D

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <title>Prueba</title>
  </head>
  <body>
  <div class="container-fluid">

    <div class="row">
      <div class="col-md-3">
        <div class="gris caja"></div>
      </div>
      <div class="col-md-3">
        <div class="gris caja"></div>
      </div>
      <div class="col-md-3">
        <div class="gris caja"></div>
      </div>
      <div class="col-md-3">
        <div class="gris caja"></div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-3">
        <div class="amarillo caja"></div>
      </div>
      <div class="col-md-6">
        <div class="gris caja"></div>
      </div>
      <div class="col-md-3">
        <div class="amarillo caja"></div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-3">
        <div class="gris caja"></div>
      </div>
      <div class="col-md-3">
        <div class="amarillo caja"></div>
      </div>
      <div class="col-md-6">
        <div class="gris caja"></div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-9">
        <div class="amarillo caja"></div>
      </div>
      <div class="col-md-3">
        <div class="gris caja"></div>
      </div>
    </div>
  </div>
  </div>
    <style>
      .caja {
  height:50px;
  border-radius:3rem;
  margin-top:5px;
  margin-bottom:5px;
  }
  .gris {
    background: grey;
  }
  .amarillo {
    background: yellow;
    display: none; /* Poner o quitar para ver o no columnas */
  }
  .row {
    margin-top:5%;
    margin-bottom:5%;
  }
    </style>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>

Prueba de codepen.io con botones para mostrar/ocultar las columnas amarillas: https://codepen.io/PatrickDyD/full/mgbpQe

2
  • Gracias por tomarte el tiempo Patrick, lo agradezco enormemente
    – ConceptDev
    Commented el 30 mar. 2019 a las 1:10
  • No hay problema amigo! Para eso estamos
    – Patrick
    Commented el 30 mar. 2019 a las 1:10
1

De partida si quieres que se vean los divs que tienes ocultos con d-none como en la imagen, tienes que sacarlos, algo de logica.

Y pensando que bootstrap la grilla es de 12 elementos en donde tu vez como los agrupas una respuesta sería esta

.caja{  
  height: 50px;
  border-radius: 3rem;
  margin-top: 5px;
  margin-bottom: 5px; 
}

.gris{
  background: grey;
}

.ylw{
  background: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link rel="stylesheet" href="style.css">
</head>
<body>

	<div class="container">
    <div class="row">
    
    <div class="col-md-3 caja gris"></div>
    <div class="col-md-3 caja gris"></div>
    <div class="col-md-3 caja gris"></div>
    <div class="col-md-3 caja gris"></div>      
        
    <div class="col-md-3 caja ylw "></div>
    <div class="col-md-6 caja gris"></div>
    <div class="col-md-3 caja ylw "></div>
       
    <div class="col-md-3 caja gris"></div>
    <div class="col-md-3 caja ylw "></div>
    <div class="col-md-3 caja gris"></div>
    <div class="col-md-3 caja gris"></div>
      
    <div class="col-md-9 caja ylw "></div>
    <div class="col-md-3 caja gris"></div>
      
    </div>
 </div>
	


</body>
</html>

Pensando en que quieres que estas cajas se vean como en la imagen

2
  • Gracias caballero por su pronta respuesta, pero deseo ocultar los contenedores amarillos
    – ConceptDev
    Commented el 29 mar. 2019 a las 21:47
  • entonces agregales el d-none y con eso, a pesar de que estén ocultos, vas a tener los divs del tamaño que muestras en tu imagen Commented el 29 mar. 2019 a las 21:50

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.