How To Make Divs Stack Without Spaces And Retain Order On Smaller Sizes - In Bootstrap

September 28, 2023 Post a Comment

I really don't know how to put this in words. When I have 2 divs in a row, each has different height, so the next row have unwanted space. But stack correctly in small screen. <

Solution 1:

For a pure css solution, if you don't use the bootstrap styles, you can use display:flex:

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.flex-div {
  border: 1px solid #000000;
  width: 50%;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .flex {
    flex-direction: column;
  }
  .flex-div {
    width: 100%;
  }
}

<divclass="flex"><divclass="flex-div"> div 1 <br> extra height</div><divclass="flex-div"> div 2 </div><divclass="flex-div"> div 3 </div><divclass="flex-div"> div 4 </div></div>

Use the full page link in the above snippet to see how the stacking changes between different screen sizes

Update

The closest I could get to what you is this:

Unfortunately it stacks the divs in columns from left first and is not supported in the older browsers:

.columns {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  column-gap: 30px;
  padding: 1px;
}
.columns-div {
  border: 1px solid #000000;
}


@media (max-width: 767px) {
  .columns {
  -webkit-column-count: auto;
  -moz-column-count: auto;
  column-count: auto
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
}
}

<divclass="columns"><divclass="columns-div">div 1
    <br>extra height</div><divclass="columns-div">div 2</div><divclass="columns-div">div 3</div><divclass="columns-div">div 4</div></div>

More information on columns

Columns support

Solution 2:

If you could add jquery maybe this could help. you could add something like:

$(document).ready(function () {
            var height = Math.max($(".left").outerHeight(), $(".right").outerHeight());
            $(".left").height(height);
            $(".right").height(height);
        });

adding class right to divs at the right and class left to divs at the left. These will make both divs same height.

The only problem may be you woudn't probably want same height when all div's in the same column. No idea if You can make a jquery code works just when window size > some px (probably) but you could force height to auto with !important at the right media queries. Just my 2 cents.

Edited: I found here that you can make this script works based on a max-width window size:

functioncheckPosition() {
    if (window.matchMedia('(max-width: 767px)').matches) {
        //...
    } else {
        //...
    }
}

Solution 3:

Revised answer

I have sorted out some code with the help of this answer https://stackoverflow.com/a/32565224/3956566

I have used a small width to demonstrate it, that is for you to customise. Also put any changes in css in a site.css file, not bootstrap and call the site.css after the bootstrap, so changes are overridden.

Css:

div {outline:solid 1px red; }

  .left {
 } 
  .right {
 }

Html:

<divstyle="display:none"><divid="1"class="left"style="height:100px;background-color:yellow;">DIV 1</div><divid="2"class="right"style="height:20px;">DIV 2</div><divid="3"class="left"style="height:50px;background-color:yellow;">DIV 3</div><divid="4"class="right"style="height:170px;">DIV 4</div><divid="5"class="left"style="height:120px;background-color:yellow;">DIV 5</div><divid="6"class="right"style="height:30px;">DIV 6</div><divid="7"class="left"style="height:50px;background-color:yellow;">DIV 7</div><divid="8"class="right"style="height:90px;">DIV 8</div></div><divid="div1"style="width: 50%;float:left;background-color:grey"></div><divid="div2"style="width: 50%;float:right;background-color:blue"></div><divid="div3"style="width: 100%;float:left;background-color:white"></div>

JQuery:

if ($(window).width() > 400) {
    $('#div1').append($('.left'));
    $('#div2').append($('.right'));
}
if ($(window).width() < 400) {
    $('#div3').append($('#1'));
    $('#div3').append($('#2'));
    $('#div3').append($('#3'));
    $('#div3').append($('#4'));
    $('#div3').append($('#5'));
    $('#div3').append($('#6'));
    $('#div3').append($('#7'));
    $('#div3').append($('#8'));
}


$('#div1').append($('.left'));
$('#div2').append($('.right'));

$( window ).resize(function() {
    if($(window).width()>400){
        $('#div1').append($('.left'));
        $('#div2').append($('.right'));  
    }
    if($(window).width()<400)
    {
        // These need to be added in order, as appending them to the// first two divs reorders them.
        $('#div3').append($('#1'));
        $('#div3').append($('#2'));
        $('#div3').append($('#3'));
        $('#div3').append($('#4'));
        $('#div3').append($('#5'));
        $('#div3').append($('#6'));
        $('#div3').append($('#7'));
        $('#div3').append($('#8'));
    }
});

See fiddle:

https://jsfiddle.net/kermit77/vo439fte/4/

First answer

Beyond putting in calculations determining individual div height and then adjusting margins accordingly (for the larger layouts only!); i.e.

div 1 height = a, div 2 height = b
div diff = (a-b)
if diff >0
div 4 top margin = -diff
else
div 3 top-margin = -diff;

But you would need to keep a running total of odd numbered div heights and even numbered div heights and adjust accordingly.

I've trimmed down the widths to test it. You need to clear left on every 3rd div to prevent it being placed on the right hand side.

<divclass="row"><divclass="col-lg-6  col-sm-12"style="height:100px;">DIV 1</div><divclass="col-lg-6  col-sm-12"style="height:80px;">DIV 2</div><divclass="col-lg-6  col-sm-12"style="height:50px;clear:left;">DIV 3</div><divclass="col-lg-6  col-sm-12"style="height:40px;">DIV 4</div></div>

For every 3rd div clear left.

css:

div {outline:solid 1px red; }
.row {
    margin-right: 2px;
    margin-left: 2px;
}
@media (min-width: 500px) {
.container {
    max-width: 1170px;
}
.col-lg-6 {
    max-width:50%;
    width: 50%;
    float:left;
    clear:right;
}  
}
@media (min-width: 150px) {
.container {
    max-width: 500px;
}
.col-sm-12 {
    width: 100%;
}
}

Solution 4:

As "R Lam" Commented above, this works:

<divclass="col-lg-6 col-md-6 col-sm-12"><div>div1</div></div><divclass="col-lg-6 col-md-6 col-sm-12"><div>div2</div></div><divclass="col-lg-6 col-md-6 col-sm-12"><div>div3</div></div><divclass="col-lg-6 col-md-6 col-sm-12"><div>div4</div></div>

I was wondering if its ok to have them add up to more than 12, but then i found this question: question link

Actually, it did not work, some spaces still appear..

Solution 5:

We can achieve it through @media queries

And you need to add alternate float left right for divs

HTML:

<divclass="wid"style="height:80px;background-color:#ccc;float:left;"> div 1 </div><divclass="wid"style="height:100px;background-color:red;float:right;"> div 2 </div><divclass="wid"style="height:90px;background-color:yellow;float:left;"> div 3 </div><divclass="wid"style="height:120px;background-color:green;float:right;"> div 4 </div><divclass="wid"style="height:100px;background-color:#ddd;float:left;"> div 5 </div>

CSS:

.wid{
width:50%;
}

@media screen and (max-width:768px){
.wid{
width:100%;
}
}

Html5 Library