CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Shishibi
Shishibi

Reputation: 53

Bootstrap gallery grid

I'm trying to make custom gallery grid using bootstrap. All goes well but im stuck on last step. I'm posting HTML structure since i belive it's problem in here somewhere but my code cotains some css (paddings/margins mostly) and JS (explained why below).

HTML:

<div class="about_gallery">
  <div class="col-xs-9 pd-9">
  <div class="row">
      <div class="col-xs-8 pd-8">
        <div class="color1"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
      </div>
      <div class="col-xs-4 pd-4">
        <div class="color2"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
      </div>  
  </div>
  <div class="row">
      <div class="col-xs-4 pd-4">
        <div class="color3"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
          <div class="color11"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>         

      </div>
      <div class="col-xs-8 pd-8">
        <div class="color4"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
        <div class="row">
            <div class="col-xs-6 cl-5">
              <div class="color5"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
              <div class="color12"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div> 
            </div>
            <div class="col-xs-6 cl-6">
              <div class="color6"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
            </div>  
        </div>
      </div>
  </div>

  </div>

  <div class="col-xs-3 pd-3">
      <div class="color8 "><img class="pion-rect" src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
      <div class="color9"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
      <div class="color10"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
  </div>
</div>

Here is fiddle: http://jsfiddle.net/y6co8e5u/

The goal is to have grid like here: Grid example

As you can see on bottom left corner instead of 1 horizontal rectangle i have two squares and i don't know how to "connect" them since it's in different columns. It's my first time with bootstrap so it's probably a little bit messy. (I'm also not sure if my JS is needed here but when i added spaces between pictures i needed to extend the pictures) I'm open for any other solution too.

Thanks for help!

Upvotes: 0

Views: 312

Answers (2)

Mayank Nimje
Mayank Nimje

Reputation: 593

You need to restructure your HTML a bit, have to put 

<div class="color10"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>

inside the <div class="col-xs-4 pd-4">

of second row. Hope this is what you want. Check updated jsfiddler: http://jsfiddle.net/mayankN/y6co8e5u/1/

Upvotes: 0

phobia82
phobia82

Reputation: 1257

I will assume you are trying to add the .color7 div, append it to <div class="col-xs-4 pd-4">, just after the .color3 block. The block will look like this:

<div class="col-xs-4 pd-4">
    <div class="color3"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
    <div class="color7"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
</div>

then on the css, set .color7 {width: calc(200% + 10px);}

here is the updated fiddle: http://jsfiddle.net/y6co8e5u/3/

no change to the js code.

Upvotes: 1

Related Questions