Twitter Bootstrap Preferred way to align content with space

Question

So this may seem like an obvious question to some, but what is the best practice for aligning the different types of contents of a range in a flexible grid? I know that you could just set the pixel height, but could it not defeat the goal of keeping things responsive?

Take a screenshot below:

<div class="container"> <div class="row"> <div class="span3 well"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis venenatis sollicitudin. Nam eros risus, lobortis a ultricies sed, interdum in mi. Donec elementum ullamcorper odio, vel gravida velit pretium quis. Donec sagittis, sem nec rhoncus tristique, dui ante volutpat nisl, sit amet feugiat velit lorem sagittis turpis. Quisque laoreet arcu et sapien volutpat nec porta augue iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan feugiat libero, vel fringilla neque euismod vitae. Nullam justo mi, faucibus sagittis pharetra non, egestas sit amet nulla.</p></div> <div class="span3 well"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis venenatis sollicitudin. Nam eros risus, lobortis a ultricies sed, interdum in mi. Donec elementum ullamcorper odio, vel gravida velit pretium quis. Donec sagittis, sem nec rhoncus tristique, dui ante volutpat nisl, sit amet feugiat velit lorem sagittis turpis. Quisque laoreet arcu et sapien volutpat nec porta augue iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan feugiat libero, vel fringilla neque euismod vitae. Nullam justo mi, faucibus sagittis pharetra.</p> </div> <div class="span3 well"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis venenatis sollicitudin. Nam eros risus, lobortis a ultricies sed, interdum in mi. Donec elementum ullamcorper odio, vel gravida velit pretium quis. Donec sagittis, sem nec rhoncus tristique, dui ante volutpat nisl, sit amet feugiat velit lorem sagittis turpis. Quisque laoreet arcu et sapien volutpat nec porta augue iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan feugiat libero.</p> </div> </div> </div> 

You can find the corresponding JSfiddle here .

Note. In this JSFiddle, for some reason, there is a response, for some reason, it works fine in my own Bootstrap Twitter application.

Answer 1

Although your markup does not support the hierarchy recommended by the bootstrap document ( .container > .row > .span > .well ), did you think of absolute positioning? No JS.

Demo (jsfiddle)

 <div class="container" style="position: relative;"> <div class="row faux-row"> <div class="span3 well"></div> <div class="span3 well"></div> <div class="span3 well"></div> </div> <div class="row vrai-row"> <div class="span3"><p>...</p></div> <div class="span3"><p>...</p></div> <div class="span3"><p>...</p></div> </div> </div> 

 .vrai-row { position: relative;z-index: 101; } .faux-row { position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 100; } .faux-row .well { height: 100%; /* The following is because .span* elements should not have paddings, margins nor borders see http://stackoverflow.com/a/11299934/1478467 */ box-sizing: border-box; } 

If you want to set margins, borders, borders (a style that actually takes up space), it should be applied to the real and to the artificial - not to the columns themselves, but to their children, for example.

The disadvantage is that (as in the demo) you have to stick to an insensitive grid (fluid or static). But it has to work with several rules encapsulated in media queries.

---

Update

Reactivity is actually not that hard to get if you keep the .well class at all stages:

Demo Responsiveness (jsfiddle)

 @media (max-width: 767px) { .faux-row { display: none!important; } } @media (min-width: 768px) { .vrai-row .well { /* Deactivate well styles */ background-color: transparent; border-color: transparent; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } } 

Answer 2

If you look at the DigitalLabs I was working on, then if you look at the profiles, I came across a similar error - I wanted them all to be the same height.

See my JSFiddle here: http://jsfiddle.net/LDtRr/2/

(scroll down and click on size to see that they all dynamically change)

I used javascript to correct the heights - I will show you the code that I used.

 function resize(resize, resizeinner) { var max = 0; //reset height back to 0 $(resize).each(function(index, element) { $(element).css({ 'height' : '0' }); }); //find height of the profiles $(resizeinner).each(function(index, element) { var height = $(element).height(); console.log(' height=' + height); if(height > max) { max = height; } }); //set the height dynamically based on the maximum so they are all uniform $(resize).each(function(index, element) { $(element).css({ 'height' : max }); console.log(' resizedTo=' + $(element).height()); }); console.log('max - ' + max); } 

Then for used html i

 <div class="span4"> <div class="well profile"> <div class="profile-resize"> <!-- content --> </div> </div> </div> 

What the code does is, it gets the maximum height for the div with the profile class, and then sets all the divs with this class to the maximum height - you can also snap this to the window size so that it automatically resizes the heights with the window.

 $(window).load(function() { //initially size the elements resize('.profile', '.profile-resize'); }); 

Perhaps this is not the most elegant solution, but at that time I could not think of the best.