I was using a version 3 of Bootstrap. Now that I updated to version 4 I have the following problem:
It worked for me with Bootstrap 3 ( see full page ):
.titulo {
height: 200px;
background: #666;
border: 1px solid #333;
}
.dato {
height: 100px;
background: #666;
border: 1px solid #333;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="titulo col-lg-3 col-md-4 col-sm-4">Titulo</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">1</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">2</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">3</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">4</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">5</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">6</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">7</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">8</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">9</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">10</div>
</div>And the same code stopped working for me with Bootstrap 4:
.titulo {
height: 200px;
background: #666;
border: 1px solid #333;
}
.dato {
height: 100px;
background: #666;
border: 1px solid #333;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="titulo col-lg-3 col-md-4 col-sm-4">Titulo</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">1</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">2</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">3</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">4</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">5</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">6</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">7</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">8</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">9</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">10</div>
</div>Question:
How can I make the div .titulotake up 2 rows, and the divs .datowrap responsively, using the remaining space, according to whether it's a device smor lg? The divs have a fixed height (the title is 2 times the height of the rest).
It is worth clarifying that I build the small boxes dynamically with an ngForangular, therefore dividing them into containers in a fixed way is not an option. The code I have to generate them is:
<div class="dato col-lg-3 col-md-4 col-sm-6"
*ngFor="let dato of datos">
{{dato.nombre}}
</div>
The problem in this case and why the code doesn't work with Bootstrap 4 (but it does with Bootstrap 3), is because version 4 uses flexbox to generate its grid layouts, while version 3 uses the typical old
float: leftcon block elements.Flexbox is a CSS Box Module that was designed to generate one-dimensional layouts , that is, in one direction, either columns or rows.
In this case, an attempt is made to generate a two-dimensional layout, which converts it into a grid and for which Flexbox "falls short". That's what CSS Grids are for. See basic examples of grids .
There are many solutions to this problem, and taking into account that there is no flexibility at the level of HTML or the CSS framework used, we must propose a solution that I personally do not prefer, nor does it seem to me the most appropriate or "clean" .
My solution is to go back and "emulate" the Bootstrap 3 behavior for this specific "grid", by returning the container
.rowto be a block (and not a flexbox container), and making the columns in said "row" usefloat: left;I consider this the simplest solution, but there may be better solutions than this, but they probably require extensive refactoring:
tablefor the container.EDITION:
Thanks to Mariano's suggestion, we see that it is not necessary to add additional CSS, using Bootstrap's "helper" classes:
d-blockandfloat-left, but it is necessary to slightly modify the HTML generated by Angular.Bootstrap works with rows first, then columns:
So first we create a row that will contain 2 columns: Inside the first column we insert a
divblank, then in the next column we insert two more rows that internally will have 3 columns.