Bootstrap alignment is not correct

Question

I tried to do a bootstrap alignment, so that I had the label and next to it the control. Well, thinking that way, I opted for the class .form-horizontal. Well, when I rescan the site, the alignment is with the label on top and the control on the bottom. The code is not certain the result. I made numerous attempts and got nothing. I’m reading about bootstrap, but I still can’t get the expected result.

<div id="agendamento">
     <form class="form-horizontal" role="form">
         <div class="control-group">
             <label for="txtCnpjOs" class="control-label">CNPJ:</label>
             <div class="controls col-sm-03">
              <input type="text" class="span2" id="txtCnpjOs" placeholder="Digite o Cnpj">
            </div>
        </div>
         <div class="control-group">
             <label for="txtOS" class="control-label">OS:</label>
             <div class="controls">
              <input type="text" class="input-small col-sm-03" id="txtOS" placeholder="Digite o numero da OS">
            </div><br />
            <input id="btnPesquisar" type="button" class="btn btn-success" value="Pesquisar" onclick=" return MontaAgendamento();" />
         </div>

     </form> 
     <br />

     <div id="filtro">
         <div id="FiltroPesquisa">
            <form class="form-horizontal" role="form">
                <div class="control-group">
                    <label for="txtAcao" id="lblProxAcao" class="control-label">Ação</label>
                    <div class="controls">
                        <input id="txtAcao" type="text" readonly="true" value="" />
                        <input id="txtProxAcao" type="text" readonly="true" value="" />
                    </div>
                </div>
                <div class="control-group">
                    <label for="txtDataCadastro" class="control-label">Data Cadastro</label>
                    <div class="controls">
                        <input id="txtDataCadastro" type="text" readonly="true" value="" />
                    </div>
                    <label for="txtIDV99" class="control-label">ID V99:</label>
                    <div class="controls">
                        <input id="txtIDV99" type="text" readonly="true" value=""/>
                    </div>
                </div>
            </form>
        </div> 
     </div>
 </div> @*Fecho a div agendamento*@

Answer 1

I added a size to the label col-sm-2 and it was enough to line up left field. In the documentation getbootstrap-Forms has that information.

Answer 2

You are using Bootstrap 2.3.2 or 3.2.0?

I ask because if you are using 2.3.2 in the documentation there is no role="form" nor the grid classes .col-Sm-3.

If you are using 3.2.0 the classes to be used in Forms have changed, below is an example of the two for you to compare:

v2.3.2

<div class="control-group">
  <label class="control-label" for="inputEmail">Email</label>
  <div class="controls">
    <input type="text" id="inputEmail" placeholder="Email">
  </div>
</div>

v3.2.0

<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>

You will replace the class .control-group for .form-control and add to inputs the class .form-control.

Check well which of the two versions of bootstrap is using and for further clarification below the documentation of the two versions.

v3.2.0 http://getbootstrap.com/css/#Forms

v2.3.2 http://getbootstrap.com/2.3.2/base-css.html#Forms