title: How to center checkboxes in table cell using Bootstrap
body: <p>I have a simple bootstrap 3 table with 4 columns:  Question, Pass, Fail, N/A.  The check boxes need to stay centered horizontally and vertically.  I've tried wrapping divs and spans etc round them but I'm still struggling. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* CSS used here will be applied after bootstrap.css */
  
  .badge-success {
      background-color: #468847;
  }
  .badge-info {
      background-color: #3a87ad;
  }
  .badge-danger {
      background-color: #b94a48;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
  
  &lt;!-- Optional theme --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"&gt;
  
  
  &lt;div style="padding-right: 20px; padding-left: 20px; padding-top: 20px;"&gt;       
      &lt;form role="form"&gt;
          &lt;div class="row"&gt;
              &lt;table style="width:100%;font-size: 11px;" class="table-striped"&gt;                            
                 &lt;tbody&gt;&lt;tr&gt;
                    &lt;td style="width: 64%"&gt;&lt;h4&gt;Questions&lt;/h4&gt;&lt;/td&gt;
                    &lt;td style="width: 12%; font-size: 14px;"&gt;&lt;span class="badge badge-success"&gt;Pass&lt;/span&gt;&lt;/td&gt;
                      &lt;td style="width: 12%; font-size: 14px;"&gt;&lt;span class="badge badge-danger"&gt;Fail&lt;/span&gt;&lt;/td&gt;
                      &lt;td style="width: 12%; font-size: 14px;"&gt;&lt;span class="badge badge-info"&gt;N/A&lt;/span&gt;&lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;td style="width: 64%"&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.??&lt;/td&gt;
                      &lt;td style="width: 12%"&gt;&lt;div class="checkbox checkbox-success"&gt;&lt;input class="styled styled-primary" name="chkQ3" value="option1" aria-label="Single checkbox One" type="checkbox"&gt;&lt;label&gt;&lt;/label&gt;&lt;/div&gt;&lt;/td&gt;
                      &lt;td style="width: 12%"&gt;&lt;div class="checkbox checkbox-danger"&gt;&lt;input class="styled styled-danger" name="chkQ3" id="chkQ3" value="option2" aria-label="Single checkbox One" type="checkbox"&gt;&lt;label&gt;&lt;/label&gt;&lt;/div&gt;&lt;/td&gt;
                      &lt;td style="width: 12%"&gt;&lt;div class="checkbox checkbox-primary"&gt;&lt;input class="styled styled-default" name="chkQ3" value="option3" aria-label="Single checkbox One" type="checkbox"&gt;&lt;label&gt;&lt;/label&gt;&lt;/div&gt;&lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;td style="width: 64%"&gt;But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful&lt;/td&gt;
                      &lt;td style="width: 12%"&gt;&lt;div class="checkbox checkbox-success"&gt;&lt;input class="styled styled-primary" name="chkQ4" value="option1" aria-label="Single checkbox One" type="checkbox"&gt;&lt;label&gt;&lt;/label&gt;&lt;/div&gt;&lt;/td&gt;
                      &lt;td style="width: 12%"&gt;&lt;div class="checkbox checkbox-danger"&gt;&lt;input class="styled styled-danger" name="chkQ4" value="option2" aria-label="Single checkbox One" type="checkbox"&gt;&lt;label&gt;&lt;/label&gt;&lt;/div&gt;&lt;/td&gt;
                      &lt;td style="width: 12%"&gt;&lt;div class="checkbox checkbox-primary"&gt;&lt;input class="styled styled-default" name="chkQ4" value="option3" aria-label="Single checkbox One" type="checkbox"&gt;&lt;label&gt;&lt;/label&gt;&lt;/div&gt;&lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;td style="width: 64%"&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus&lt;/td&gt;
                      &lt;td style="width: 12%"&gt;&lt;div class="checkbox checkbox-success"&gt;&lt;input class="styled styled-primary" name="chkQ5" value="option1" aria-label="Single checkbox One" type="checkbox"&gt;&lt;label&gt;&lt;/label&gt;&lt;/div&gt;&lt;/td&gt;
                      &lt;td style="width: 12%"&gt;&lt;div class="checkbox checkbox-danger"&gt;&lt;input class="styled styled-danger" name="chkQ5" value="option2" aria-label="Single checkbox One" type="checkbox"&gt;&lt;label&gt;&lt;/label&gt;&lt;/div&gt;&lt;/td&gt;
                      &lt;td style="width: 12%"&gt;&lt;div class="checkbox checkbox-primary"&gt;&lt;input class="styled styled-default" name="chkQ5" value="option3" aria-label="Single checkbox One" type="checkbox"&gt;&lt;label&gt;&lt;/label&gt;&lt;/div&gt;&lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;td style="width: 64%"&gt;On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided.&lt;/td&gt;
                      &lt;td style="width: 12%"&gt;&lt;div class="checkbox checkbox-success"&gt;&lt;input class="styled styled-primary" name="chkQ6" value="option1" aria-label="Single checkbox One" type="checkbox"&gt;&lt;label&gt;&lt;/label&gt;&lt;/div&gt;&lt;/td&gt;
                      &lt;td style="width: 12%"&gt;&lt;div class="checkbox checkbox-danger"&gt;&lt;input class="styled styled-danger" name="chkQ6" value="option2" aria-label="Single checkbox One" type="checkbox"&gt;&lt;label&gt;&lt;/label&gt;&lt;/div&gt;&lt;/td&gt;
                      &lt;td style="width: 12%"&gt;&lt;div class="checkbox checkbox-primary"&gt;&lt;input class="styled styled-default" name="chkQ6" value="option3" aria-label="Single checkbox One" type="checkbox"&gt;&lt;label&gt;&lt;/label&gt;&lt;/div&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;&lt;/table&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's my example in bootply:</p>
  
  <p><a href="http://www.bootply.com/nKeLbZSMFb" rel="nofollow">http://www.bootply.com/nKeLbZSMFb</a></p>