Databases
StackOverflow2013
Postsdbo
POHorizontally centering Bootstrap elements that use the an odd span width
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHorizontally centering Bootstrap elements that use the an odd span width
    text
    copied!<p>This seems to be a common problem in the Bootstrap community, the process of centering and class with an odd number for the span width, <code>class="span3"</code> for example. I have a <code>.row</code> with three <code>.span3</code> classes inside it. I realize it would be easier to just use three <code>span4</code> classes, but I'm not a fan of how large it makes my elements.</p> <p>I've tried a few things so far:</p> <ol> <li><p>I've created a custom 15-column grid so I could give a <code>.span3</code> class before and after the three elements I actually want to use, however when <code>responsive-bootstrap.css</code> kicks in, things act strange because the responsive file deals with a 12-column grid.</p></li> <li><p>I've tried placing everything in a custom <code>.center</code> class which uses the following CSS:</p> <pre><code>.center { float: none; margin: 0 auto; text-align: center; } </code></pre></li> </ol> <p>For what it's worth, everything works when my browser width is between ~980px - ~1199px.</p> <p>There has to be a simple way to fix this problem, right? I'm not worried about it looking good on older browsers either, this is a personal site. Here is where I'm currently at, working with a 15-column grid:</p> <p><strong>Here is my <a href="http://jsfiddle.net/yeQUZ/" rel="nofollow">JSFiddle</a></strong></p> <p>The HTML:</p> <pre><code>&lt;div class="row"&gt; &lt;div class="center"&gt; &lt;ul class="thumbnails" id="portfolio-links"&gt; &lt;li class="span3"&gt;&lt;/li&gt; &lt;li class="span3" id="item1"&gt; &lt;a href="#" class="thumbnail" id="portfolio-element"&gt;&lt;/a&gt; &lt;/li&gt; &lt;li class="span3" id="item2"&gt; &lt;a href="#" class="thumbnail" id="portfolio-element"&gt;&lt;/a&gt; &lt;/li&gt; &lt;li class="span3" id="item3"&gt; &lt;a href="#" class="thumbnail" id="portfolio-element"&gt;&lt;/a&gt; &lt;/li&gt; &lt;li class="span3"&gt;&lt;/li&gt; &lt;/ul&gt;&lt;!--/.thumbnails--&gt; &lt;/div&gt;&lt;!--/.center--&gt; &lt;/div&gt;&lt;!--/.row--&gt; </code></pre> <p>The CSS:</p> <pre><code>#portfolio-links { display: block; margin: 0 auto; float: none; } .center { float: none; margin: 0 auto; text-align: center; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload