Somehow I can not get out how to finish my code which I formatted as a list and need to format it as grid too which is switched by javascript.
My HTML Code below is used to list a content:
<div class="list">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">Right is next DIV</div>
<div class="col-lg-6 col-md-6 col-sm-5 col-xs-12">Right is next DIV</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">I am the last DIV</div>
</div>
</div>
The CSS Code for the list. All other CSS is taken by bootstrap:
.styled_view div.list {
padding: 0;
width: 100%;
}
The same code should be used to show grid:
<div class="grid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">Under me should be a DIV</div>
<div class="col-lg-6 col-md-6 col-sm-5 col-xs-12">Under me should be a DIV</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">I am the last DIV</div>
</div>
</div>
The CSS for the grid:
.styled_view div.grid {
display: inline-block;
overflow: hidden;
vertical-align: top;
width: 19.4%;
}
The 19.4% for each part of gallery keeps the DIVs next to next. It will not push it to a new line. How could I solve it?
This question is related to
html
css
twitter-bootstrap
Do a row div.
Like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">_x000D_
<div class="grid">_x000D_
<div class="row">_x000D_
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 bg-success">Under me should be a DIV</div>_x000D_
<div class="col-lg-6 col-md-6 col-sm-5 col-xs-12 bg-danger">Under me should be a DIV</div>_x000D_
</div>_x000D_
<div class="row">_x000D_
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 bg-warning">I am the last DIV</div>_x000D_
</div>_x000D_
</div>If your your list is dynamically generated with unknown number and your target is to always have last div in a new line set last div class to "col-xl-12" and remove other classes so it will always take a full row.
This is a copy of your code corrected so that last div always occupy a full row (I although removed unnecessary classes).
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">_x000D_
<div class="grid">_x000D_
<div class="row">_x000D_
<div class="col-sm-3">Under me should be a DIV</div>_x000D_
<div class="col-md-6 col-sm-5">Under me should be a DIV</div>_x000D_
<div class="col-xl-12">I am the last DIV and I always take a full row for my self!!</div>_x000D_
</div>_x000D_
</div>Source: Stackoverflow.com