Bootstrap push div content to new line

Question

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    lt div class  list  gt       lt div class  row  gt           lt div class  col-lg-3 col-md-3 col-sm-3 col-xs-12  gt Right is next DIV lt  div gt           lt div class  col-lg-6 col-md-6 col-sm-5 col-xs-12  gt Right is next DIV lt  div gt           lt div class  col-lg-3 col-md-3 col-sm-4 col-xs-12  gt I am the last DIV lt  div gt       lt  div gt   lt  div gt    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    lt div class  grid  gt       lt div class  row  gt           lt div class  col-lg-3 col-md-3 col-sm-3 col-xs-12  gt Under me should be a DIV lt  div gt           lt div class  col-lg-6 col-md-6 col-sm-5 col-xs-12  gt Under me should be a DIV lt  div gt           lt div class  col-lg-3 col-md-3 col-sm-4 col-xs-12  gt I am the last DIV lt  div gt       lt  div gt   lt  div gt    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

User · Answer

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).

_x000D_

<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>

_x000D_

User · Answer

Do a row div   Like this    x000D   x000D   lt 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  gt  x000D   lt div class  grid  gt  x000D       lt div class  row  gt  x000D           lt div class  col-lg-3 col-md-3 col-sm-3 col-xs-12 bg-success  gt Under me should be a DIV lt  div gt  x000D           lt div class  col-lg-6 col-md-6 col-sm-5 col-xs-12 bg-danger  gt Under me should be a DIV lt  div gt  x000D       lt  div gt  x000D       lt div class  row  gt  x000D           lt div class  col-lg-3 col-md-3 col-sm-4 col-xs-12 bg-warning  gt I am the last DIV lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

[html] Bootstrap push div content to new line

Examples related to html

Examples related to css

Examples related to twitter-bootstrap