title: Span with radio button underneath
body: <p>I have some bootstrap code to have radio buttons to choose a color: <a href="http://jsfiddle.net/m4uoo2s9/" rel="nofollow">http://jsfiddle.net/m4uoo2s9/</a></p>
  
  <p>The css looks like:</p>
  
  <pre><code>.color {
    height: 20px;
    width: 25px;
    display: inline-block;
  }
  
  .red { background: red; } /* And I'll have a blue one, and a green one */
  </code></pre>
  
  <p>Right now the radio button has their respective color span to the right. However, I want the radio button to be centered horizontally <em>under</em> it's respective color span.</p>