css3 - Bootstrap: how to stack divs of different heights? -

-

this question bit similar this one, want know if there pure css solution compatible bootstrap.

basically, have following layout:

enter image description here

this html of page:

<div class="menu row">     <div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12">         <div class="menu-category-name list-group-item active">category</div><a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>         <a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>         <a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>         <a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>         <a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>         <a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>         <a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>     </div>      <div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12">         <div class="menu-category-name list-group-item active">category</div><a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>         <a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>         <a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>         <a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>     </div>      <div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12">         <div class="menu-category-name list-group-item active">category</div><a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>         <a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>         <a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>         <a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>         <a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>     </div>      <div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12">         <div class="menu-category-name list-group-item active">category</div><a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>         <a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>         <a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>         <a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>         <a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>         <a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>         <a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>         <a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>     </div>      <div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12">         <div class="menu-category-name list-group-item active">category</div><a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>         <a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>         <a href="#" class="menu-item list-group-item">lorem ipsum.<span class="badge">€ 0.00</span></a>     </div> </div>

the problem is, can see, row system of bootstrap bit inconvenient here. want these categories stack in optimal way. question is: how can css? masonry plugin seems excellent keep plan b.

thanks!

take @ these examples..

masonry-style layout css

applied bootstrap list-group this..

http://bootply.com/85737

however, need remove bootstrap col-* classes markup since use floats mess masonry layout. use *-column-width property change width of panels. so, it's possible pure css, not cross-browser compatible still may want use masonry plugin fallback.

if you're looking ensure columns wrap every x columns, use bootstrap responsive resets, or clearfix solution media queries this: http://www.codeply.com/go/jxuoghhker

more on solving different heights issue

update bootstrap 4 include css column layout masonry option.


Comments

Post a Comment

Popular posts from this blog

ruby on rails - Permission denied @ sys_fail2 - (D:/RoR/projects/grp/public/uploads/ -

-
i trying rename upload image permission denied @ sys_fail2 - (d:/ror/projects/grp/public/uploads/gallery/test.jpg, d:/ror/projects/grp/public/uploads/gallery/qinsnvzicc20160509132021.jpg) my code : photo = params[:gallery][:gal_img] name = photo.original_filename directory = "#{rails.root}/public/uploads/gallery/" path = file.join(directory, name) uniq_name = (0...10).map { (65 + rand(26)).chr }.join time_footprint = time.now.to_formatted_s(:number) file.open(path, "wb") |file| new_file_name = uniq_name + time_footprint + file.extname(file) file.write(photo.read) @uniq_path = file.join(directory, new_file_name) file.rename(file, @uniq_path) end i have checked , giving privilege in ruby directory. please let me know why getting permission denied error?
Read more

c++ - nodejs socket.io closes connection before upgrading to websocket -

-
i'm trying write c++ client talk websocket server written using nodejs , socket.io. can't c++ client establish websocket connection; server drops connection right after client requests http connection upgraded websocket. i used tcpdump watch packets going , forth. when use websocket server browser, works great , tcpdump output shows packets going , forth. when try connect server using c++ client, websocket connection never gets established. output tcpdump shows upgrade request being sent server followed server dropping connection. i tried replicating sequence of events using nc . connected server (running on port 8080) , copy-pasted exact set of headers sent browser, captured tcpdump. duplicate of working headers, connection dropped. there no output on server end indicating why connection gets dropped. here headers sent: get /socket.io/?type=player&eio=3&transport=websocket&sid=7mdclht_8ctsd6f4aaac http/1.1 host: localhost:8080 connection: upgrade prag
Read more

java - What is the equivalent of @Value in CDI world? -

-
what way 1 inject property value property placeholder cdi bean? in spring 1 write: @org.springframework.beans.factory.annotation.value("${webservice.user}") private string webserviceuser; what sets webserviceuser field property webservice.user property file/property placeholder. how cdi? i've tried find answer, couldn't find equivalent. however, people write, can use cdi spring substitute on application servers, , use case basic, surely there must easy way, unfortunately i've failed find it. cdi specification dependecy injection , context doesn't have such configuration things out of box. provides powerful extension mechanism allows third party projects add new portable features (i.e works cdi implementation , not tied server). important project providing cdi extensions apache deltaspike , news, provides need. so need add deltaspike-core in project. if use maven, need add dependencies pom.xml <dependency> <group
Read more