How to deal with an odd number of columns in bootstrap
We usually cannot center align <div>
when working with odd columns. Here is my problem.
This is developed with Bootstrap. I want all inner divs to be centered. This way, when the page is viewed on other devices, everything is centered. When viewed across the width of the screen, md
there is little space on the right side.
I want three column widths md
and lg
two columns in the width sm
and one column wide xs
. It must be centered in all viewports.
Here's my markup:
<div class="container-fluid">
<div class="row-fluid">
<div class="fleet_bor col-lg-4 col-md-4 col-sm-4 col-xs-12 col-centered">
<a href="http://someurl.com/gulfstream-iii/">
<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/III-01-300x240.jpg" />
</a>
<h4>Gulfstream III</h4>
</div>
<div class="fleet_bor col-lg-4 col-md-4 col-sm-4 col-xs-12">
<a href="http://someurl.com/gulfstream-iv-sp-1/">
<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/V2-1-300x240.jpg" />
</a>
<h4>Gulfstream V2</h4>
</div>
<div class="fleet_bor col-lg-4 col-md-4 col-sm-4 col-xs-12">
<a href="http://someurl.com/gulfstream-iv-sp-1/">
<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/FLEET_SP1.jpg" />
</a>
<h4>Gulfstream SP1</h4>
</div>
<div>
</div>
source to share
I found a better solution regarding this, I have this problem due to an odd number of columns, so I just added left and right column columns and work columns in the middle to solve my problem !, here's the code that I did.
<div class="entry-content">
<div class="col-lg-1 col-md-1 col-sm-1 hidden-xs"></div>
<div class="col-lg-10 col-md-10 col-sm-11 col-xs-12 moile_fix_">
<div class="fleet_bor col-lg-4 col-md-4 col-sm-6 col-xs-12">
<a href="http://someurl.com/gulfstream-iii/">
<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/III-01-300x240.jpg">
</a>
<h4>Gulfstream III</h4>
</div>
<div class="fleet_bor col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-0 col-xs-12 col-xs-offset-0">
<a href="http://someurl.com/gulfstream-iv-sp-1/">
<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/V2-1-300x240.jpg">
</a>
<h4>Gulfstream V2</h4>
</div>
<div class="fleet_bor col-lg-4 col-md-4 col-sm-6 col-xs-12">
<a href="http://someurl.com/gulfstream-iv-sp-1/">
<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/FLEET_SP1.jpg">
</a>
<h4>Gulfstream SP1</h4>
</div>
<div class="fleet_bor col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-0 col-xs-12 col-xs-offset-0">
<a href="http://someurl.com/gulfstream-g550/">
<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/G5500-1-300x244.jpg">
</a>
<h4>Gulfstream G550</h4>
</div>
<div class="fleet_bor col-lg-4 col-md-4 col-sm-6 col-xs-12">
<a href="http://someurl.com/gulfstream-v1/">
<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/V1-1-300x240.jpg">
</a>
<h4>Gulfstream V1</h4>
</div>
<div class="fleet_bor col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-0 col-xs-12 col-xs-offset-0">
<a href="http://someurl.com/gulfstream-iv-sp-2/">
<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/FLEET_SP2.jpg">
</a>
<h4>Gulfstream SP2</h4>
</div>
<div class="fleet_bor col-lg-4 col-md-4 col-sm-6 col-xs-12">
<a href="http://someurl.com/gulfstream-iv-sp-3/">
<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/FLEET-SP3.jpg">
</a>
<h4>Gulfstream SP3</h4>
</div>
</div>
<div class="col-lg-1 col-md-1 hidden-sm hidden-xs"></div>
</div>
source to share