title: Cannot move check box to align with my bootstrap textbox
body: <p>JSFiddle for code, then screenshot of what I see on my screen, since JSFiddle is displaying it wrong :</p>
  
  <p>(entire code in link, brief view below)
     <a href="http://jsfiddle.net/WeDLR/1/" rel="nofollow noreferrer">http://jsfiddle.net/WeDLR/1/</a>
     <img src="https://i.stack.imgur.com/4vhJi.jpg" alt="pic1"></p>
  
  <pre><code>        &lt;div class="col-lg-3"&gt; 
              &lt;form method =post action="/UnitInfo/TSMServlet" NAME="form01"&gt;
  
                  &lt;div class="form-group"&gt;
                      &lt;label for="terminalname" class="col-lg-3 control-label"&gt;Terminal Name&lt;/label&gt;
                          &lt;div class="col-lg-3"&gt;
                              &lt;input type="checkbox" class="checkbox" display="inline-block" name="checkbox_tname" onclick="checkbox_tname_click();"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;
                              &lt;input type="text" class="form-control" name="tname" placeholder="Terminal Name"&gt;
                          &lt;/div&gt; 
                  &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Currently, my check box is partially under my textbox. I want to make it so the center of the check box is on the same line as the center of the text box. How can I do this? </p>
  
  <p>PS. If I don't use a bootstrap textbox, it seems like my alignment is just fine.</p>