markus_css Posted February 28, 2017 Share Posted February 28, 2017 Hi, Thanks for looking! I am having some trouble with how the columns and rows lay out when I loop content. I am using Bootstrap. This code gives me the 4 responsive columns, but their uneven depths (images/text) mean it does not look good on a page. Here's what the code looks like; <div class="container-fluid bg-3 text-center"> <div class="row"> <div class="col-sm-3"> <loop> this loop gets an image and some text, and loops again til it's done (usually about 10-15 times. </loop> </div> </div> There's an image attached which shows what it results in and what I would like it to... Any help/advice really appreciated! Thank agains. Mark Link to comment Share on other sites More sharing options...
Ingolme Posted February 28, 2017 Share Posted February 28, 2017 Doing it programmatically would be hard. If you know beforehand how many you want in each column you can have four columns with the items placed in each one: <div class="col-sm-3"> Column 1 <div> Item 1 </div> <div> Item 2 </div> </div> <div class="col-sm-3"> Column 2 <div> Item 1 </div> <div> Item 2 </div> </div> <div class="col-sm-3"> Column 3 <div> Item 1 </div> <div> Item 2 </div> </div> <div class="col-sm-3"> Column 4 <div> Item 1 </div> <div> Item 2 </div> </div> To do it programmatically, in your loop you can divide the total items by 4, every time that amount of items has been placed in a column, create a new column. There's also a Javascript library called Masonry that arranges pages like that quickly and easily. Link to comment Share on other sites More sharing options...
markus_css Posted March 1, 2017 Author Share Posted March 1, 2017 Thanks for the swift response. I will take a look and comment back, although it may be beyond me ;-) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now