Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Wendell Pulsipher
Wendell Pulsipher
10,183 Points

bootstrap grid system: how do I make it work both horizontally and vertically?

here is my html

<div class='col-md-10'>
    <div class='row'>
        <div class='col-md-2 img o-t'><img src='img/tmp7pic1.png'/></div>
        <div class='col-md-2 img o-o'><img src='img/tmp7pic2.png'/></div>
        <div class='col-md-4 img t-o'><img src='img/tmp7pic7.png'/></div>
        <div class='col-md-2 img o-o'><img src='img/tmp7pic3.png'/></div>
        <div class='col-md-2 img o-t'><img src='img/tmp7pic15.png'/></div>
        <div class='col-md-2 img o-o'><img src='img/tmp7pic5.png'/></div>
        <div class='col-md-2 img o-o'><img src='img/tmp7pic12.png'/></div>
        <div class='col-md-2 img o-t'><img src='img/tmp7pic6.png'/></div>
        <div class='col-md-2 img o-o'><img src='img/tmp7pic8.png'/></div>
        <div class='col-md-2 img o-o'><img src='img/tmp7pic9.png'/></div>
        <div class='col-md-2 img t-o'><img src='img/tmp7pic10.png'/></div>
        <div class='col-md-2 img o-o'><img src='img/tmp7pic11.png'/></div>
        <div class='col-md-2 img o-t'><img src='img/tmp7pic13.png'/></div>
        <div class='col-md-2 img o-o'><img src='img/tmp7pic8.png'/></div>
        <div class='col-md-2 img t-o'><img src='img/tmp7pic14.png'/></div>
        <div class='col-md-2 img o-o'><img src='img/tmp7pic4.png'/></div>
        <div class='col-md-2 img o-o'><img src='img/tmp7pic16.png'/></div>
    </div>
</div>

and I'm using the bootstrap.min.css file from getbootstrap.com

how do I make it so it looks like this - http://www.webified.biz/templates/template4.html - instead of this:http://www.webified.biz/templates/template4/index.php

note I realize that there are several other aspects of these two pages that are different, but I'm just talking about the main picture section

update: url reposted, mostly fixed below

6 Answers

Jitendra Vyas
Jitendra Vyas
2,349 Points
Jitendra Vyas
Jitendra Vyas
2,349 Points

It's not possible with Bootstrap grid. Use Flexbox with Masonry http://tympanus.net/Development/GridLoadingEffects/

Wendell Pulsipher
Wendell Pulsipher
10,183 Points
Wendell Pulsipher
Wendell Pulsipher
10,183 Points

the page you provided is okay, but where do i get Flexbox? is there a framework somewhere I can download? edit oh wait, nevermind. I just look it up and I now realize that's kind of a dumb question. haha thanks for the help

Wendell Pulsipher
Wendell Pulsipher
10,183 Points
Wendell Pulsipher
Wendell Pulsipher
10,183 Points

Okay so I applied Masonry with flexbox, but now if you take a look at this example - http://www.webified.biz/templates/template4/index.php - in smaller window sizes, some of the pictures don't quite fit right in the grid. How do I fix that?

Wendell Pulsipher
Wendell Pulsipher
10,183 Points
Wendell Pulsipher
Wendell Pulsipher
10,183 Points

Okay so I made some more edits to it. Now things are really messed up. How do I eliminate those gutters on each image? Not sure whether to look at my flexbox coding or if it's something to do with something I did wrong in Masonry

Guil Hernandez and suggestions?

Wendell Pulsipher
Wendell Pulsipher
10,183 Points
Wendell Pulsipher
Wendell Pulsipher
10,183 Points

Anyone?

Migle Varnagire
Migle Varnagire
7,739 Points
Migle Varnagire
Migle Varnagire
7,739 Points

It would be great to get a reply on this, I am trying to do same thing with Bootstrap and Masonry and after Masonry is added, bootstrap on small devices has problems with navigation and images lay on each other when website is resized quickly. When resizing slowly, it's not a problem. Why could that be? Also navigation background disappears in small devices. How can I fix that?