Bootstrap: how to stack divs of different heights?
Take a look at these examples..
Masonry-style Layout ONLY with CSS
Applied to your Bootstrap list-group it would look something like this..
http://bootply.com/85737
However, you need to remove the Bootstrap col-* classes from your markup since they use floats a mess up the masonry layout. Use the *-column-width property to change the width of the panels. So, it's possible with pure CSS, but not cross-browser compatible so you still may want to use the Masonry plugin as a fallback.
If you're simply looking to ensure the columns wrap every x columns, use Bootstrap responsive resets, or a clearfix solution with media queries like this: http://www.codeply.com/go/jXuoGHHker
More on solving the different heights issue
UPDATE Bootstrap 4 will include a CSS column layout masonry option.
Stack divs with different heights
I suppose that you are using jQuery on your site. From the sketch I suggest to take a look at jQuery plugin called Masonry.
Bootstrap: how to stack divs of different heights?
Take a look at these examples..
Masonry-style Layout ONLY with CSS
Applied to your Bootstrap list-group it would look something like this..
http://bootply.com/85737
However, you need to remove the Bootstrap col-* classes from your markup since they use floats a mess up the masonry layout. Use the *-column-width property to change the width of the panels. So, it's possible with pure CSS, but not cross-browser compatible so you still may want to use the Masonry plugin as a fallback.
If you're simply looking to ensure the columns wrap every x columns, use Bootstrap responsive resets, or a clearfix solution with media queries like this: http://www.codeply.com/go/jXuoGHHker
More on solving the different heights issue
UPDATE Bootstrap 4 will include a CSS column layout masonry option.
Stacking boxes of different heights
Make a wrapper for ABDE, make that wrapper col-6 and make C col-6.
This will float your 4 divs next to C.
it will look something like this:
<div class="wrapper col-6">
<div class="A"></div>
<div class="B"></div>
<div class="D"></div>
<div class="E"></div>
</div>
<div class="C col-6"></div>
Add your responsive columns as needed
Bootstrap div column height change other div's locations
i have change html
like
<div class="col-md-7">
<div class="content">
<div class="row form-group">
<span class="col-md-3 text-right paddingtop_5px">Input 1:</span>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
<div class="row form-group">
<span class="col-md-3 text-right paddingtop_5px">Input 2:</span>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
<div class="row form-group">
<span class="col-md-3 text-right paddingtop_5px">Input 3:</span>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
<div class="row form-group">
<span class="col-md-3 text-right paddingtop_5px">Input 4:</span>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
<div class="row form-group">
<span class="col-md-3 text-right paddingtop_5px">Input 5:</span>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="content">
<div class="row form-group">
<span class="col-md-3 text-right paddingtop_5px">Input 6:</span>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
<div class="row form-group">
<span class="col-md-3 text-right paddingtop_5px">Input 7:</span>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
<div class="row form-group">
<span class="col-md-3 text-right paddingtop_5px">Input 8:</span>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
<div class="row form-group">
<span class="col-md-3 text-right paddingtop_5px">Input 9:</span>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
<div class="row form-group">
<span class="col-md-3 text-right paddingtop_5px">Input 10:</span>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="content">
<div class="row form-group">
<span class="col-md-3 text-right paddingtop_5px">Input 12:</span>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
</div>
</div>
<div class="col-md-4 col-md-offset-1">
<div class="content">
<div class="row form-group">
<span class="col-md-3 text-right paddingtop_5px">Input 13:</span>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
<div class="row form-group">
<span class="col-md-3 text-right paddingtop_5px">Input 14:</span>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
<div class="row form-group">
<span class="col-md-3 text-right paddingtop_5px">Input 15:</span>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
<div class="row form-group">
<span class="col-md-3 text-right paddingtop_5px">Input 16:</span>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="content">
<div class="row form-group">
<span class="col-md-3 text-right paddingtop_5px">Input 17:</span>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
<div class="row form-group">
<span class="col-md-3 text-right paddingtop_5px">Input 18:</span>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
<div class="row form-group">
<span class="col-md-3 text-right paddingtop_5px">Input 19:</span>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
<div class="row form-group">
<span class="col-md-3 text-right paddingtop_5px">Input 20:</span>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
<div class="row form-group">
<span class="col-md-3 text-right paddingtop_5px">Input 21:</span>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
<div class="row form-group">
<span class="col-md-3 text-right paddingtop_5px">Input 22:</span>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
<div class="row form-group">
<span class="col-md-3 text-right paddingtop_5px">Input 23:</span>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
<div class="row form-group">
<span class="col-md-3 text-right paddingtop_5px">Input 24:</span>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
<div class="row form-group">
<span class="col-md-3 text-right paddingtop_5px">Input 25:</span>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
<div class="row form-group">
<span class="col-md-3 text-right paddingtop_5px">Input 26:</span>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
</div>
</div>
https://jsfiddle.net/e8ve0wy2/1/
Columns of Different Height in Bootstrap
Bootstrap works based on columns inside of rows. That means it always works horizontally, then vertically. To achieve the desired layout, what you'll want to do is consider the page to be comprised of two columns; left and right. The left-most column contains three elements that all take up all of the remaining with (col-12), while the right-most column contains a single element with three times as much height.
Note that you'll also have to account for any margin / padding on the right-hand column; in the following, I use a margin of 5px (mostly just to show the background for each element), which means that I need to add 20px of height for the right-hand-column (covering the outer 10px plus the two inner 5px gaps):
.element { height: 100px; background: red; margin: 5px; padding: 10px;}
.right .element { height: 320px;}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="row"> <div class="col-6"> <div class="row"> <div class="col-12"> <div class="element">Top-left</div> </div> </div> <div class="row"> <div class="col-12"> <div class="element">Mid-left</div> </div> </div> <div class="row"> <div class="col-12"> <div class="element">Bottom-left</div> </div> </div> </div> <div class="col-6 right"> <div class="element">Right</div> </div></div>divs have different heights
You need to remove width: 100% for the images and the columns will be equal in height. Fiddle.
Bootstrap 4 aligning div to bottom of another div in column with different heights
Columns in bootstrap are not display: flex and that is why the align-items-end is not working. Add the classes d-flex and flex-column to your column classes. Added the class .flex-1 and put this on your upper div.
* { border: 1px solid red !important;}
.body-block-3 { max-width: 250px; margin-left: auto; margin-right: auto;}
.flex-1 { flex: 1;}<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body> <div class="row text-center no-gutters"> <div class="col-sm-4 d-flex flex-column"> <div class="flex-1"> <h4>Components and examples</h4> <p class="body-block-3">multiple line text example random text should break across multiple lines</p> </div> <div> <a href="">Learn more 1</a> </div> </div> <div class="col-sm-4 d-flex flex-column"> <div class="flex-1"> <h4>Components and examples</h4> <p class="body-block-3">one line text example</p> </div> <div> <a href="">Learn more 2</a> </div> </div> <div class="col-sm-4 d-flex flex-column"> <div class="flex-1"> <h4>Components and examples</h4> <p class="body-block-3">multiple line text example random text should break across multiple lines</p> </div> <div> <a href="">Learn more 1</a> </div> </div> </div></body>all divs with same height in a flexbox with at the bottom
There is no way to equally align the content in children of separate flexbox parents. You can however make the columns also flexbox container using d-flex and then mt-auto (margin-top:auto) to push the dates to the bottom of the columns.
<div class="col-sm-12 col-md-3 d-flex flex-column">
<div class="row">
<div class="col-lg-12">
here are different heights possible
</div>
</div>
<div class="row mt-auto">
<div class="col-lg-12 date">
date
</div>
</div>
</div>
Demo: https://www.codeply.com/go/gLYW7liCfc
Also see: bootstrap 4 cards - vertical alignment body with variable header line rows
Different height and position for col in bootstrap
You are placing 3 images per div.row, which results in this layout:
As you can see, the div.row elements are stacked, and each div.row is as high as its highest image, creating gaps for the remaining space in each row.
In summary, you have divided the grid first by rows, and then by columns.
What you need is a masonry grid. As opposite to your approach, this grid is divided first by columns, and then by rows or images.
The main concept behind a masonry grid resides in an approach like this:
<!-- Left column -->
<div class="col-md-4">
<img src="" alt="Top image">
<img src="" alt="Middle image">
<img src="" alt="Bottom image">
</div>
<!-- Center column -->
<div class="col-md-4">
<img src="" alt="Top image">
<img src="" alt="Middle image">
<img src="" alt="Bottom image">
</div>
<!-- Right column -->
<div class="col-md-4">
<img src="" alt="Top image">
<img src="" alt="Middle image">
<img src="" alt="Bottom image">
</div>
Related Topics
Why Did Bootstrap 3 Switch to Box-Sizing: Border-Box
Drop Shadow For Png Image in Css
What Does an Asterisk Do in a CSS Property Name
When Will an ≪A≫ Tag Not Inherit Color Attribute of Parent Tag
Ie11 - Does a Polyfill/Script Exist For CSS Variables
Css Transition Shorthand With Multiple Properties
How to Use Font Awesome from Webjars.Org With Jsf
Changing Font Colour in Textboxes in Ie Which Are Disabled
iOS 7 iPad Safari Landscape Innerheight/Outerheight Layout Issue
Defining Variable Variables Using Less CSS
Hover Effect: Expand Bottom Border
Css3 Cross Browser Linear Gradient
How to Remove the Outline Around Hyperlinks Images
How to Properly Display an Iframe in Mobile Safari
Should I Use 'Border: None' or 'Border: 0'