2

This seems to be my 2nd question regarding Twitter Bootstrap Grid system - but I'm fumbled.

I'm trying to build an image gallery, where each slide has an interesting layout. The JavaScript part is no problem (yay jQuery!) - it is the CSS/HTML part I'm stuck with.

Here's what I got so far - jsfiddle

<div class="container" style="padding-top: 20px; position: relative; padding-bottom: 20%; height: 0; overflow: hidden">
    <div class="flexslider" style="position: absolute; top: 0; left: 0; padding-top: 20px; padding-bottom: 20px; width: 100%; height: 100%">
        <ul class="slides">
            <li>
                <!-- Slide #1 -->
                <div class="row">
                    <div class="col-xs-offset-2 col-xs-3" style=""> <a href="#" class="thumbnail">
                                        <img src="img/bg-blur/IMG_8446.jpg">
                                        <div class="thumbtext"><h3>TEXT</h3></div>
                                    </a>

                    </div>
                    <div class="col-xs-5">
                        <div class="row">
                            <div class="col-xs-4"> <a href="#" class="thumbnail">
                                                <img src="img/bg-blur/IMG_8757.jpg">
                                                <div class="thmbtxt">Description</div>
                                            </a>

                            </div>
                            <div class="col-xs-4"> <a href="#" class="thumbnail">
                                                <img src="img/bg-blur/IMG_8848.jpg">
                                                <div class="thmbtxt">Description</div>
                                            </a>

                            </div>
                            <div class="col-xs-4"> <a href="#" class="thumbnail">
                                                <img src="img/bg-blur/IMG_8864k.jpg">
                                                <div class="thmbtxt">Description</div>
                                            </a>

                            </div>
                            <div class="col-xs-6"> <a href="#" class="thumbnail">
                                                <img src="img/bg-blur/noga.jpg">
                                                <div class="thmbtxt">Description</div>
                                            </a>

                            </div>
                            <div class="col-xs-6"> <a href="#" class="thumbnail">
                                                <img src="img/bg-blur/untitled-(1-of-11).jpg">
                                                <div class="thmbtxt">Description</div>
                                            </a>

                            </div>
                        </div>
                    </div>
                    <div class="col-xs-2"></div>
                </div>
            </li>
        </ul>
    </div>
</div>

If you notice, the left-most image takes up only 1 row. What I'm trying to do is automatically resize it (the block in which it is sitting in), so it takes up the entire height of the 2 rows. This way it would look neat and symetrical.

Any ideas or thoughts about this?

hyit
  • 496
  • 4
  • 10
  • It's difficult to see because the image links are broken in the fiddle. But I think the solution here is to add 'height' to the 'col-xs-offset-2 col-xs-3' element, using an id to identify it. This should work assuming the height of the row is constant. If not, you will find this difficult because of the 'float' property on columns. Updated fiddle: http://jsfiddle.net/1j0f0u5o/1/ – bogeylicious Oct 21 '14 at 18:58
  • You may also want to check techniques described here: http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height – bogeylicious Oct 21 '14 at 19:06
  • @mtaube thanks! The height is not fixed or constant, as it represents a percentage of the page height (so as to make the webpage responsive). Those other techniques look interesting, I'll give them a go. Thanks! – hyit Oct 21 '14 at 19:18
  • If I understand this, you want to have a grid and when the user clicks or hovers or whatever the column expands? I wouldn't bother with Bootstrap for this: http://codepen.io/desandro/pen/htsui -- http://masonry.desandro.com/ - you can make them any size. Make sure you read the docs, use images loaded (another plugin by the same person) – Christina Oct 21 '14 at 21:11
  • @Christina, yeah that's about right! I've stumbled upon masonry in my searches, but it seems it requires a fixed width, or am I mistaken? I'll take another look anyway, thanks! – hyit Oct 21 '14 at 23:12
  • Masonry, Isotope, and Packery can be fluid, use gutter-sizer, grid-sizer, see the instructions and the demo. – Christina Oct 21 '14 at 23:48
  • @Christina I'm still lost. Here's my best attempt so far, and this isn't even including the images yet.: [link](http://jsfiddle.net/hxdzb6t2/) – hyit Oct 22 '14 at 00:08
  • This is a sloppy version. http://jsbin.com/zubesu/1 you have to use local scripts as the repaint delays on fiddles or Bins. Read and google about gutter size, fluid layouts etc., it's quite a lot of reading and effort but you won't get far with Bootstrap's grid. Might want to test to see if it works in a slider, most of this stuff gets size on load and if the slider's slide/item is not loaded, it won't work. – Christina Oct 22 '14 at 14:18

0 Answers0