Sign in to follow this  
Followers 0
markus_css

Bootstrap css columns don't look good

3 posts in this topic

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

post-210975-0-77939500-1488313674_thumb.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Thanks for the swift response. I will take a look and comment back, although it may be beyond me ;-)

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0