Bootstrap grid for form

Question

How can I do a line break on a grid using bootstrap

For mine is staying in columns to the right instead of falling, even if the sum of 12 columns Ivs.

I believe I’m making mistakes and not understanding their grid system well.

<fieldset>
                    <legend>Opções</legend>

                    <div class="form-group">
                        <label for="ctl00_MainContent_txt_Ref" class="col-sm-2 control-label">Referência</label>
                        <div class="col-sm-10 input-group">
                            <input name="ctl00$MainContent$txt_Ref" type="text" id="ctl00_MainContent_txt_Ref" class="form-control" placeholder="Referência do imóvel, opcional." onBlur="funref(this.value)" />
                            <span id="ctl00_MainContent_lbl_UltimaRef" class="input-group-addon" style="color:#333333;font-size:X-Small;">Última ref.: 3084</span>

                            <span id="lbl_RefUtilizada" class="input-group-addon" style="color:Red;font-size:X-Small;"></span>
                        </div>
                    </div>
                      <div class="col-sm-10">
                        <div class="form-inline">
                        <div class="form-group col-sm-5">
                            <label for="ctl00_MainContent_txt_AT">Área Total</label>
                            <input name="ctl00$MainContent$txt_AT" type="number" id="ctl00_MainContent_txt_AT" class="form-control" placeholder="m²" />
                            <span id="ctl00_MainContent_RangeValidator7" style="color:#FF3300;visibility:hidden;">Deve ser númerico entre 0 a 99999999</span>
                        </div>
                        <div class="form-group col-sm-5">
                            <label for="ctl00_MainContent_txt_AT">Área construída </label>
                            <input name="ctl00$MainContent$txt_AC" type="number" id="ctl00_MainContent_txt_AC" class="form-control" placeholder="m²" />
                            <span id="ctl00_MainContent_RangeValidator9" style="color:#FF3300;visibility:hidden;">Deve ser númerico entre 0 a 99999999</span>
                        </div>
                    </div>

                        <div class="form-group">
                            <label for="ctl00_MainContent_txt_Dorm" class="col-sm-2 control-label">Dormitórios</label>
                            <input name="ctl00$MainContent$txt_Dorm" type="number" id="ctl00_MainContent_txt_Dorm" class="form-control" />
                            <span id="ctl00_MainContent_RangeValidator5" style="color:#FF3300;visibility:hidden;">Deve ser númerico entre 0 a 999</span>
                        </div>
                        <div class="form-group">
                            <label for="ctl00_MainContent_txt_Suite" class="col-sm-2 control-label">Suítes</label>
                            <input name="ctl00$MainContent$txt_Suite" type="number" id="ctl00_MainContent_txt_Suite" class="form-control" />
                            <span id="ctl00_MainContent_RangeValidator6" style="color:#FF3300;visibility:hidden;">Deve ser númerico entre 0 a 999</span>
                        </div>

                        <div class="form-group">
                            <label for="ctl00_MainContent_txt_WC" class="col-sm-2 control-label">Banheiros</label>
                            <div class="col-sm-10">
                                <input name="ctl00$MainContent$txt_WC" type="number" id="ctl00_MainContent_txt_WC" class="form-control" />
                                <span id="ctl00_MainContent_RangeValidator1" style="color:#FF3300;visibility:hidden;">Deve ser númerico entre 0 a 999</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="ctl00_MainContent_txt_Vaga" class="col-sm-2 control-label">Vagas na garagem</label>
                            <div class="col-sm-10">
                                <input name="ctl00$MainContent$txt_Vaga" type="number" id="ctl00_MainContent_txt_Vaga" class="form-control" />
                                <span id="ctl00_MainContent_RangeValidator2" style="color:#FF3300;visibility:hidden;">Deve ser númerico entre 0 a 999</span>
                            </div>
                        </div>


                          </div>
                </fieldset>

Example of the above code: http://sigasoftware.com.br/test/index.html

Answer 1

To ensure that it is responsive and occupies the ideal size just use row within a <div> and within this div you use up grid system 12 columns.

example:

<div class="row">
   <div class="col-md-4">Esquerda</div>
   <div class="col-md-4">Centro</div>
   <div class="col-md-4">Direita</div>
</div>

Documentation: getBootstrap

Answer 2

You need to include the class row of bootstrap:

<div class="row">
  <!-- Seu código -->
</div>