CODEWITHSUNDEEP
csstwitter-bootstrap
luqo33
luqo33

Reputation: 8361

Aligning responsive images in Twitter Bootstrap

I am trying to align images that occupy two columns in one row on my website. Unfortunatlely, I am unable to acheive the desired result. Below I'm pasting a bootply that explains the problem better than I could with words:

http://www.bootply.com/VLI1jrLYp9

I would like the images to be aligned at the bottom at all times, but at the moment the bigger image is always shorter than the group of images on the right. At their natural size, the images are the same height.

Please not that I have removed the outermost gutters from the row. However, even with the gutter in place, the images are still not aligned at the bottom.

I must be missing something realy simple, but please point it out to me.

Thank you!

Upvotes: 1

Views: 627

Answers (1)

Christina
Christina

Reputation: 34652

Unless the padding is the same on all sides of the column, the images will appear at different visual sizes. There's a good bit of adjustment to make, here's an example.

DEMO: http://jsbin.com/zayiye/1/

http://jsbin.com/zayiye/1/edit?html,css,output

enter image description here

CSS:

/* demo only */
body {
    /*newer ie covers up content unless this is included*/
    -ms-overflow-style: scrollbar;
}
.full-width {
    padding: 0;
}
/* Flush Grid */
.row.flush-grid {
    overflow: hidden;
    margin-right: 0;
    margin-left: 0;
}
.row.flush-grid [class*="col-"].row {
    padding: 0;
    margin: 0;
}
.row.flush-grid [class*="col-"] {
    padding: 0;
    margin-bottom:-1px;
}
.row.flush-grid img {
    width: 100.5%;
    height: auto;
}
@media (min-width:768px) { 
    [class*="col-"].first {
        margin-bottom: 0
    }
    [class*="col-"].last {
        margin-top: 0
    }
    .row.tight-grid [class*="col-"] {
        padding: 0px
    }
    .row.tight-grid [class*="col-"].row {
        padding: 0;
        margin: 0;
    }
}

HTML

<div class="container-fluid full-width">
   <div class="row flush-grid">
      <div class="col-sm-6">
         <img src="http://lorempixel.com/600/400/fashion" alt="">
      </div>
      <div class="col-sm-6 row">
         <div class="col-xs-6"><img src="http://lorempixel.com/300/200/nature" alt="" ></div>
         <div class="col-xs-6"><img src="http://lorempixel.com/300/200/food" alt="" ></div>
         <div class="col-xs-6"><img src="http://lorempixel.com/300/200/cats" alt="" ></div>
         <div class="col-xs-6"><img src="http://lorempixel.com/300/200/business" alt="" ></div>
      </div>
   </div>
   <!--/.row.flush-grid -->
   <div class="row flush-grid">
      <div class="col-sm-6 row">
         <div class="col-xs-6"><img src="http://lorempixel.com/300/200/animals" alt="" ></div>
         <div class="col-xs-6"><img src="http://lorempixel.com/300/200/city" alt="" ></div>
         <div class="col-xs-6"><img src="http://lorempixel.com/300/200/people" alt="" ></div>
         <div class="col-xs-6"><img src="http://lorempixel.com/300/200/sports" alt="" ></div>
      </div>
      <!--/.row.flush-grid -->
      <div class="col-sm-6">
         <img src="http://lorempixel.com/600/400/transport" alt="">
      </div>
   </div>
   <!--/.row.flush-grid -->
</div>
<!--/.container-fluid full-width-->

Upvotes: 4

Related Questions