I am experimenting with combining fluid containers and fixed containers within a single page layout using Bootstrap.
For example, I want to have a large image as a hero unit that spans 100% of the width and height of the viewport, or three column images each taking up 100% of the viewport width, but in other sections of the same page, sticking to a maximum container width of 1200px along with Bootstrap grid elements. I intend to follow the guidelines outlined in this article here to create a vertically scrolling single page site.
Is this achievable using Bootstrap alone, or should I consider creating custom layouts for each section of my single page and using media queries?
I attempted to use the .span4 and row-fluid classes for the three column images, but encountered issues with unwanted gutter space and span lengths when removing it.
I will update my progress soon by providing a working example of what I'm trying to achieve and where I currently stand.
* UPDATE *
Here is a preview of my current progress: http://jsfiddle.net/ditikos/ejMAQ/4/embedded/result/
The .block class referenced here will generate pages ensuring they fill at least the height of the viewport (in situations like the second scenario with the .thumbnail, the height may extend up to twice the viewport due to multiple thumbnails on one page).
- How can I arrange the three columns within
.blockso that they stack appropriately in mobile view? - I am aiming to create a content carousel with three columns using the
.aThirdslices. Is this possible to achieve within a grid layout?