Twitter Bootstrap - unusual arrangement of the columns - html

Question

I have a problem and I can't find a good solution right now. What I want to achieve is this (on screen size >= medium):
In black boxes there will be images. The white color represents the user screen view. I would like for those two horizontal boxes to fully fit to the screen edges.
<link href="http://cdn.jsdelivr.net/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=1" alt="" />
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=2" alt="" />
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-xs-12 col-sm-6 col-md-4">
<!-- make it span to the right edge of the screen on resolution >= medium -->
<img class="img-responsive" src="http://placehold.it/1920x300&text=3" alt="" />
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<!-- make it span to the left edge of the screen on resolution >= medium -->
<img class="img-responsive" src="http://placehold.it/1920x300&text=4" alt="" />
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-xs-12 col-sm-6 col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=5" alt="" />
</div>
<div class="hidden-xs col-sm-6 col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=6" alt="" />
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-xs-12 col-sm-6 col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=7" alt="" />
</div>
<div class="hidden-xs hidden-sm col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=8" alt="" />
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=9" alt="" />
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">some more content that is in container class, the total width of those three images above should be equal to this container so it fits nicely</div>
</div>
</div>
I give you the basic grid with elements that I want to see based on user screen size.
Any help with this would be great.
BTW: this need to be in the container because there will be content above and below those images and it needs to be somehow aligned to be consistent.

Answer 1

I think this should work for you
<div class="container">
<div class="row">
<div class="col-sm-2 col-sm-offset-3"></div>
<div class="col-sm-2"></div>
<div class="col-sm-4"></div>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
</div>
<div class="row">
<div class="col-sm-2 col-sm-offset-3"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
</div>
</div>

Answer 2

You can use the col-md-offset-x class to achieve the gabs. For example a row with a gab at the beginning:
<div class="col-md-2 col-md-offset-2">
<img class="img-responsive" src="http://placehold.it/1920x300/" alt="" />
</div>
<div class="col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300/" alt="" />
</div>
<div class="col-md-2">
<img class="img-responsive" src="http://placehold.it/1920x300/" alt="" />
</div>
<div class="col-md-2">
<img class="img-responsive" src="http://placehold.it/1920x300/" alt="" />
</div>
Note that you created a grid with 5 'places'. This is not possible in standard bootstrap, as bootstrap's grid is based upon 12 'places' (12 modulo 5 = 2).

Answer 3

AFAIK, the only way to acheive this is with nesting and column offsets. Also, you have to use container-fluid if you want to fill the entire screen width. The use the grid columns to limit the width of the 3rd row. You're basically turning the 12 column grid into a 10 column grid.
http://codeply.com/go/k8LNUgjaa0
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-11 col-md-offset-2">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-11 col-md-offset-2">
<div class="row">
<div class="col-md-3 col-md-push-3">
</div>
<div class="col-md-3 col-md-push-3">
</div>
<div class="col-md-6 col-md-pull-9">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-11 col-md-offset-2">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
</div>
</div>
</div>

Answer 4

Hi you can use customized column like below
<style>
.col-md-offset-sp { margin-left:20% }
#media (min-width:992px) { .col-md-sp { position:relative;min-height:1px;padding-right:15px;padding-left:15px;float:left; width: 20%; }}
#media (min-width:992px) { .col-md-2sp { position:relative;min-height:1px;padding-right:15px;padding-left:15px;float:left; width: 40%; }}
</style>
<div class="container">
<div class="row">
<div class="col-md-sp col-md-offset-sp"><img src="http://placehold.it/250x150" /></div>
<div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
<div class="col-md-2sp"><img src="http://placehold.it/500x150" /></div>
<div class="col-md-2sp"><img src="http://placehold.it/500x150" /></div>
<div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
<div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
<div class="col-md-sp col-md-offset-sp"><img src="http://placehold.it/250x150" /></div>
<div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
<div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
</div>
</div>
Here col-md-sp and col-md-2sp take care of 5 column layout (width 20% & 40%). While col-md-offset-sp take care of margin for 5 column layout (margin-left 20%).
Note : other rules are just copied from bootstrap.css file