Welcome to the Treehouse Community
The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.
Bootstrap 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.
Stone Preston42,016 Points
that 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 Heesyam8,843 Points
i 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