Twitter bootstrap - Gallery grid of different size images

JulianSamarjiev
September 1, 2015
182 views
3 votes
3 Answers

Hello I am trying to replicate this design:

The size of the three images is the same and I am using Twitter Bootstrap, but cannot get them to align this way. The idea is to have the bigger image as 6 columns and then the other two would be 6, but on top of each other, aligning to the same height as the bigger one. Any ideas how I can tackle this or any libraries I can use?

EDIT: add current code

<div class="home-banner-option-three">
      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-6 nopadding banner-left">
            <img class="img-responsive" src="" alt="Banner image" />
            <div class="banner-text">
              <h4 class="banner-title">text</h4>
              <p class="banner-paragraph">text</p>
              <a href="" class="btn banner-btn">text</a>
            </div>
          </div>
          <div class="col-sm-6 noppading banner-right">
            <div class="row">
              <div class="col-sm-6 nopadding">
                <div class="banner-xs-one">
                  <p>text</p>
                </div>
              </div>
              <div class="col-sm-6 nopadding">
                <div class="banner-xs-two">
                  <img class="img-responsive" src="" alt="Banner image" />
                  <div class="banner-text">
                    <h4 class="banner-title">text</h4>
                    <p class="banner-paragraph">text</p>
                    <a href="" class="btn banner-btn">text</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12 nopadding">
                <div class="banner-sm">
                  <img class="img-responsive" src="" alt="Banner image" />
                  <div class="banner-text">
                    <h4 class="banner-title">text</h4>
                    <p class="banner-paragraph">text</p>
                    <a href="" class="btn banner-btn">text</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

I have removed all the unnecessary source paths and text to keep it readable

Answers

Something like this? It doesn’t use twitter bootstrap or a grid system, its just a couple of simple floats.

.large {
    float: left;
    margin-right: 10px;
}
.small {
    float: left;
}
.small img {
    height: 95px;
    display: block;
}
.small img:first-child {
    margin-bottom: 10px;
}

<div class="gallery">
    <img src="http://placehold.it/300x200" class="large" />
    <div class="small">
        <img src="http://placehold.it/300x200" />
        <img src="http://placehold.it/300x200" />
    </div>
</div>

You have to assign min-height to right blocks to match the height of left block. eg.
html code.

<div class='col-md-8 block-left'>
</div>
<div class='col-md-4'>
   <div class='row'>
      <div class='col-md-12 block-right-top'></div>
      <div class='col-md-12 block-right-bottom'></div>
   </div>
</div>

css

.block-left{
        height:210px;
    }
    .block-right-top{
        min-height:100px;
        margin-bottom:10px;
    }
    .block-right-bottom{
        min-height:100px;
    }

- SaswataSundar
- September 1, 2015 at 3:51 pm
- 0 votes
0
First: Try to put it in 2 different
<div class="row"> <div class="col-md-8 Height1">  <img src="..."/> </div> <div class="col-md-4">  <div class="col-md-12 Height2"> <img src="..."/> </div> <div class="col-md-12 Height2"> <img src="..."/> </div> </div> </div>
Specify the height for col-md-8 – (Height1 class)
Height1 has to be divided by 2 for Height2 class.

Use float is necessary.
*NB: Not adding any custom CSS. So, plz do not check the output in “Run Code”
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Twitter bootstrap – Gallery grid of different size images

Answers