html - Bootstrap row with columns of different height -


i have like:

<div class="row">     <div class="col-md-4">content</div>     <div class="col-md-4">content</div>     <div class="col-md-4">content</div>     <div class="col-md-4">content</div>     <div class="col-md-4">content</div>     <div class="col-md-4">content</div>     <div class="col-md-4">content</div>     <div class="col-md-4">content</div>     <div class="col-md-4">content</div> </div>

now assuming that, content boxes of different height, same width - how keep same "grid based layout" , yet have boxes line under each other, instead of in perfect lines.

currently twbs place next line of col-md-4 under longest element in previous third row., each row of items aligned clean - while awesome want each item fall directly under last element

this popular bootstrap question, i've updated , expanded answer.

the bootstrap "height problem" occurs because columns use float:left. when column “floated” it’s taken out of normal flow of document. shifted left or right until touches edge of containing box. so, when have uneven column heights, correct behavior stack them closest side.

bootstrap uneven wrapping columns

note: options below applicable column wrapping scenarios there more 12 col units in single .row. readers don't understand why there more 12 cols in row, or think solution "use separate rows" please read first!

there few ways fix this.. (updated 2017)

1 - 'clearfix' approach (recommended bootstrap) (requires iteration every x columns). force wrap every x number of columns...

enter image description here

<div class="row">     <div class="col-md-4">content</div>     <div class="col-md-4">content</div>     <div class="col-md-4">content</div>     <div class="clearfix"></div>     <div class="col-md-4">content</div>     <div class="col-md-4">content</div>     <div class="col-md-4">content</div>     <div class="clearfix"></div>     <div class="col-md-4">content</div>     <div class="col-md-4">content</div>     <div class="col-md-4">content</div> </div>

clearfix demo (single tier)

clearfix demo (responsive tiers) - eg. col-sm-6 col-md-4 col-lg-3

there css-only variation of 'clearfix'
css-only clearfix tables

2 - make columns same height (using flexbox):

since issue caused difference in height, can make columns equal height across each row. flexbox best way this, , natively supported in bootstrap 4...

enter image description here

.row.display-flex {   display: flex;   flex-wrap: wrap; } .row.display-flex > [class*='col-'] {   display: flex;   flex-direction: column; }

flexbox equal height demo

3 - un-float columns use inline-block instead..

again, height problem occurs because columns floated. option set columns display:inline-block , float:none. provides more flexibility vertical-alignment. however, solution there must no html whitespace between columns, otherwise inline-block elements have additional space , wrap prematurely.

demo of inline block fix

4 - css3 columns approach (masonry-like css solution)..

this not native bootstrap 3, approach using css multi-columns. 1 downside approach column order top-to-bottom instead of left-to-right. bootstrap 4 include type of solution: bootstrap 4 masonry cards demo.

bootstrap 3 multi-columns demo

5 - masonry javascript/jquery approach

finally, may want use plugin such isotope/masonry: enter image description here

bootstrap masonry demo
masonry demo 2

more on bootstrap variable height columns


Comments

Post a Comment

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

is possible store keyboard events 1 string? code below stores 1 char , prints it. card reader or bar code reader, contains collection of character/ string not 1 character @ time. goal save char pressed text variable. from tkinter import * root = tk() def key(event): text= event.char text+= event.char print ("pressed", text) def callback(event): frame.focus_set() print ("clicked at", event.x, event.y) frame = frame(root, width=100, height=100) frame.bind("<key>", key) frame.bind("<button-1>", callback) frame.pack() root.mainloop() currently, creating text variable , everytime key() function gets called, , text stores last character typed. you can define text module level variable , , use module level text inside key function - text = '' def key(event): global text text+= event.char print("pressed", text)
Read more

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m
Read more

javascript - Z-index in d3.js -

i have map , when hover effect on region of map below yellow line , circle, last ones disappear. how can solve problem? http://jsfiddle.net/ot21n9qx/ var arc = g.append("path") .style("fill", "none") .style("stroke", "yellow") .style("stroke-width", 2) .attr("d", "m" + pathorigin[0] + "," + pathorigin[1] + " q" + svgpoint[0] + "," + pathorigin[1] + " " + svgpoint[0] + "," + svgpoint[1]); var circlesize = d3.scale.linear() .domain([0, 0.5, 1]) .range([4, 10, 4]); svg not have z order draws objects in order created. need create path , circle after create highlight regions. here forked fiddle: http://jsfiddle.net/o00fzgaf/1/
Read more