Question

I’m using Twitter Bootstrap as a framework for my app, and thumbnails to show information about different products (6 divided into two rows). However, the thumbnails is left aligned and I can’t manage to get them centered. How could that be done?

html:

<div class="row span12">
    <ul class="thumbnails span12">
        <li class="span3 product">
          <div class="thumbnail padding pagination-centered">
            Product 1
          </div>
        </li>
        <li class="span3 product">
          <div class="thumbnail padding pagination-centered">
            Product 2
          </div>
        </li>
        <li class="span3 product">
          <div class="thumbnail padding pagination-centered">
            Product 3
          </div>
        </li>
          <li class="span3 product">
          <div class="thumbnail padding pagination-centered">
            Product 4
          </div>
        </li>
        <li class="span3 product">
          <div class="thumbnail padding pagination-centered">
            Product 5
          </div>
        </li>
          <li class="span3 product">
          <div class="thumbnail padding pagination-centered">
            Product 6
          </div>
        </li>
    </ul>
</div>

Output:

     _____________________
    |                     |
    |  Products           |
    | ___   ___   ___     |
    ||   | |   | |   |    |
    ||___| |___| |___|    |
    | ___   ___   ___     |
    ||   | |   | |   |    |
    ||___| |___| |___|    |
    |                     |
    |_____________________|

Desired output:

     _____________________
    |                     |
    |  Products           |
    |   ___   ___   ___   |
    |  |   | |   | |   |  |
    |  |___| |___| |___|  |
    |   ___   ___   ___   |
    |  |   | |   | |   |  |
    |  |___| |___| |___|  |
    |                     |
    |_____________________|

Answer 1

you need to set the uls width equal to the 3 elements added width + borders, margins and paddings. centering you can achive by setting left and right margins to auto.

see the demo
http://jsbin.com/odojit/2/edit

.thumbnails li {
  width:100px;
  list-style:none;
  float:left;
  height:100px;
  margin:10px;
    border:solid black 1px;

}
ul {
  padding:0px;margin:0px;}
.span12 {
  width:368px;
  border:red solid 1px;
  margin-left:auto;
  margin-right:auto;
}

To override something like bootstrap, you need to have higher css specifity in your new code, which means higher priority.

As a rule of thumb:

Id selector is worth 10x as much as class selector which is 10 times as much as element selector.

#id div {code}

overrides

.class .class .class .class .class .class .class .class .class .class {css code}

Check this article for more details:

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

So if bootstrap uses an ID selector, to overwrite it, you can use body #idselector, which will give it +1 specifity. !important also works, but doesnt allways work in IE6.