Organize form block in boostrap

Question

Good afternoon, I would like to know how to organize the form blocks horizontally. The page I am inspired by:

My page: http://tratspay.com/app/detalhamentotesteform.html

insira o código aqui

Answer 1

You need to add your "grid columns" into a "grid line". Remember?!

Here’s how your code looks - note the comment where you start and end the grid line:

<form method="post" id="buscarVendas" action="vendas/relatorio/exportar">
                     <input type="hidden" name="exportar" id="exportar" value=""> 
                     <input type="hidden" name="produto" id="produto" value=""> 
                     <input type="hidden" name="afiliado" id="afiliado" value="">
                     <input type="hidden" name="forma_pagamento" id="forma_pagamento" value="">
                     <input type="hidden" name="statusVenda" id="statusVenda" value="">
                     <input type="hidden" name="ant" id="ant" value="">


                     <div class="row"> <!-- <<<<<<<<<<<<<<<<< DIV ROW (LINHA) COMEÇA AQUI >>>>>>>>>>>>> -->
                      <div class="col-sm-4">

                        Transação: <input id="transacao" name="transacao" class="form-control " value="" type="text" placeholder="Para pesquisar mais de uma separe por vírgula">

                      </div>

                      <div class="col-sm-4 form-group">

                        Produto:  

                        <select id="produto_select" name="produto_select" class="form-control mutiplo" data-placeholder="Todos produtos">
                          <option value="">Todos os produtos</option>";
                          <option value="34754">Emgrecimento Caps</option><option value="34648">Ovo de colher gourmet</option> 
                        </select>



                      </div>

                      <div class="col-sm-4 form-group">

                         Forma de pagamento:  
                          <select multiple="" class="form-control mutiplo" id="forma_pagamento_select" name="forma_pagamento_select" data-placeholder="Todas formas de pagamento">

                            <option value="1">Cartão de crédito</option>

                            <option value="3" selected="">Boleto</option> 

                            <option value="5">Gratis</option>

                            <option value="6">Outra</option>

                          </select>

                      </div>    



                      <div class="col-sm-4 form-group">

                        Comprador: <input id="comprador" name="comprador" class="form-control " type="text" placeholder="Nome ou e-mail">

                      </div>
                  </div> <!-- <<<<<<<<<<<<<<<<< DIV ROW (LINHA) TERMINA AQUI >>>>>>>>>>>>> -->
                  <div class="row"> <!-- <<<<<<<<<<<<<<<<< DIV ROW (LINHA) COMEÇA AQUI >>>>>>>>>>>>> -->

                      <div class="col-sm-4 form-group">

                        CPF/CNPJ: <input id="cnpj_cpf" name="cnpj_cpf" class="form-control " type="text" placeholder="CPF/CNPJ do comprador">

                      </div>


                      <div class="col-sm-4 form-group">

                        Data do pedido: <input id="data_pedido" autocomplete="off" name="data_pedido" class="form-control datarange" type="text">

                      </div>
                      <div class="col-sm-4 form-group">

                        Data finalizada: <input autocomplete="off" id="data" name="data" class="form-control datarange" type="text" value="">

                      </div>

                  </div> <!-- <<<<<<<<<<<<<<<<< DIV ROW (LINHA) TERMINA AQUI >>>>>>>>>>>>> -->
                  <div class="row"> <!-- <<<<<<<<<<<<<<<<< DIV ROW (LINHA) COMEÇA AQUI >>>>>>>>>>>>> -->

                      <div class="col-sm-4 form-group">

                         Status:  
                          <select multiple="" class="form-control mutiplo" id="statusVenda_select" name="statusVenda_select" data-placeholder="Todos status">
                          <option value="1">Aguardando pagamento</option><option value="5">Bloqueada</option><option value="3">Cancelada</option><option value="6">Completa</option><option value="4">Devolvida</option><option value="2">Finalizada</option>                          <option value="99" selected=""> Boleto vencido</option>
                          </select>

                      </div>

                      <div class="col-sm-4 form-group">

                        Afiliado: 
                        <select id="afiliado_select" name="afiliado_select" class="form-control mutiplo" data-placeholder="Todos produtos">
                          <option value="">Todos os afiliados</option>";

                        </select>


                      </div>
                      <div class="col-sm-4 form-group">


                        <label style="line-height: 54px;"><input type="checkbox" name="vendaDireta" id="vendaDireta" value="1"> Somente vendas diretas</label>


                      </div>
                  </div> <!-- <<<<<<<<<<<<<<<<< DIV ROW (LINHA) TERMINA AQUI >>>>>>>>>>>>> -->
                  <div class="row"> <!-- <<<<<<<<<<<<<<<<< DIV ROW (LINHA) COMEÇA AQUI >>>>>>>>>>>>> -->

                                            <div class="col-sm-12 form-group">

                         <button type="submit" id="btnBuscar" class="btn btn-primary btn-gradient" data-loading-text="Buscando..."> <span class="fa fa-search"></span> Filtrar</button> 

                      </div>
    </div> <!-- <<<<<<<<<<<<<<<<< DIV ROW TERMINA AQUI >>>>>>>>>>>>> -->



                    </form>

---

I know I’ve sent you (amos) the Bootstrap documentation related to the grid, but here it goes again:

Recommended reading: Grid System - Bootstrap

A small tip to not get lost between grid rows and columns is to assimilate to the legitimate HTML table: tr is the div.row and td is the div.col-*. There is no logic in td out of a tr, such a way that it has no logic a div.col-* out of a div.row. Get it?! ;D