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
Anca Verniceanu
Courses Plus Student 170 PointsBootstrap grid arrangement
can someone please tell me if there is any chance I can create this layout in HTML using Bootstrap?
I just can't figure out if it's even possible.
http://postimg.org/image/qynytmlon
thank you
2 Answers
Stone Preston
42,016 Pointsthat is absolutely possible using bootstrap. Bootstrap 3 just came out and most of the videos that are on this site were made using bootstrap 2. The look and feel has changed quite a bit, and even the bootstrap site is completely different.
Read here about the grid system. Its pretty easy to use, and easy to implement the "stacking" for the mobile site and then a horizontal layout for the normal site
Faizal Heesyam
8,843 Pointsi believe its possible..
at first by looking at the full-width mockup, its possible by making a single row with 2 column (span7, span5), then inside of those column you declare another nested row with span7/span5 respectively.
But, the moment i see the div sequence on that responsive mockup, we have to use another approach.
this all should be in inside a single .row div, then inside you just create all those div in your preffered order, (span7, span5, span7, span5), i havent actually code this yet, but it should work as expected. and when the responsive is activated, all the span* width will be reset and it should display/stack each other according to the expected sequence (1,2,3,4).
regarding Bootstrap 3, the only thing i noticed is they remove the gutter by default, giving you full flexibility for grid~ing your layout.. :D
Anca Verniceanu
Courses Plus Student 170 Pointsthanks for your reply;
If I put all the spans in a single row there will be space between those two span5. http://postimg.org/image/6p0ksed4v
I was thinking about using Masonry.js but this is also not a good solution for me cause one of those span's will have a mini slider inside and the height can't be fixed.
Faizal Heesyam
8,843 Pointsic.. masonry might be able to solve this.. as for the responsive version, just reset the width as usuall..