Let's say we've created a row into bootstrap and then added two columns, one for the blog content, on the left side (col-sm-7) and another one for the sidebar (col-sm-5), on the right side.

is there a way to make the content in col-sm-7 expands to col-sm-12 when the height of col-sm-5 is less than the height of col-sm-7 (or in other words: when there's no content on the sidebar?: let's say a user adds only one widget. The problem is, the sidebar will occupy all the right side, which is not good looking.)

Here's an image to show what I mean:

Let's say we've created a row into bootstrap and then added two columns, one for the blog content, on the left side (col-sm-7) and another one for the sidebar (col-sm-5), on the right side.

is there a way to make the content in col-sm-7 expands to col-sm-12 when the height of col-sm-5 is less than the height of col-sm-7 (or in other words: when there's no content on the sidebar?: let's say a user adds only one widget. The problem is, the sidebar will occupy all the right side, which is not good looking.)

Here's an image to show what I mean:

• javascript
• jquery
• css
• twitter-bootstrap
• dynamic

Share Improve this question Follow asked Apr 10, 2017 at 15:17 DexterDexter 30911 gold badge33 silver badges1313 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

As mentioned, there's no way to do this with the standard Bootstrap grid. However, with a few CSS tweaks it's possible, by adhering to these "rules"..

Put the sidebar first, and float it right..

<div class="col-sm-5 pull-right">
            ..
</div>

Make the col-sm-7 width:auto, and un-float it..

.float-none {
    float: none;
    width: auto;
}

Finally, any child DIV's inside the col-sm-7 need to be overflow: auto...

Demo: http://codeply./go/njEg31ZG33

AFAIK, flexbox would not work well for this.

I can't see an easy way to do this in bootstrap (maybe in bootstrap 4 with flexbox...) - both sets of content are in very distinct containers. You could probably achieve it with a little javascript and some CSS hackery, but it wouldn't be advisable. The code in this example is untested.

Anyway, one potential method of doing this would be to put your sidebar in the same column as your blog content (eugh) and make each content col-7 and your sidebar col-5.

At this point, you could use jQuery to calculate which rows should be expanded to col-12 to fill up the space under the sidebar by paring the height of the sidebar (say, 400) vs the height of columns (say, 100 each). This way, you'd know that 4 content items add up to 400 (the height of your sidebar). This means from the 4th element onward, you could change the class to col-12.

var contentItems = $(".content"); // your 'content' items
var sidebar = $(".sidebar");
var contentItemHeight = $(".content").first().height;
var sidebarHeight = $(".sidebar").height;

var smallColumns = sidebarHeight / contentItemHeight; // 4
var $i = 1;

$.each($contents, function(){
  if($i <= smallColumns){
    // Next to sidebar
    $(this).addClass(".col-xs-7");
  }else{
    // Below sidebar
    $(this).addClass(".col-xs-12");
  }
})

// Edited to remove accidental switch to PHP