Leave Input next to Label

Asked

Viewed 983 times

1

How to align inputs with the label

Good afternoon, I have a dynamic form, it is done using Bootstrap and the inputs/Labels is according to the database data, everything is correct, but in the inputs are getting below the Label and not next door as it was supposed to be.

Como esta a tela atualmente

Jquery that builds my form

$.getJSON($('#base-url').val() + '/atleta/get_input_area_avaliar',
            function(data) {
                for (var i=0; i < data.length; i++) { 
                        form += '<div class=\"col-md-12\">';
                        if(i == 0 || data[i]['descricao_tecnica'] != data[i-1]['descricao_tecnica']){ 
                            form += '<p style=\"font-weight: bold; font-size:18px; background-color: #0D80BF; color:white;\" class=\"text-center\"><span>'+data[i]['descricao_tecnica']+'</span></p>'; 
                        }
                        form += '<div><label for=\"'+data[i]['cod_area_avaliar_item']+'\">'+data[i]['descricao_item']+':</label></div>';

                        form += '<select style=\"width:65px;\" class=\"form-control\" id=\"item_'+ data[i]['cod_area_avaliar_item'] +'\" name=\"item_'+ data[i]['cod_area_avaliar_item'] +'\">';
                        form += '<option value=\"--\" disabled selected>---</option>';
                        form += '<option value=\"10\">10</option>';
                        form += '<option value=\"9\">9</option>';
                        form += '<option value=\"8\">8</option>';
                        form += '<option value=\"7\">7</option>';
                        form += '<option value=\"6\">6</option>';
                        form += '<option value=\"5\">5</option>';
                        form += '<option value=\"4\">4</option>';
                        form += '<option value=\"3\">3</option>';
                        form += '<option value=\"2\">2</option>';
                        form += '<option value=\"1\">1</option>';
                        form += '</select>';
                        form += '<br>';
                        form += '</div>';
                }
                $('#frmNovaAvaliacao #inputs_avaliacao').html(form);
            });

HTML where the form is inserted

<div id="frmAvaliacaoItem" style="overflow-y: auto;" class="modal fade" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
    <form onsubmit="salvar_area_avaliacao_item(); return false;" style="margin-bottom:0">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel"></h3>
            </div>
            <div class="modal-body">
                <div class="alert" style="display:none;"></div>


            <div class="col-md-12">                                        
                <input id="cod_area_avaliar_item" type="hidden" name="cod_area_avaliar_item" value="null"/>
                <div class="col-md-12">
                        <label for="descricao">Descrição</label>
                        <input type="text" class="form-control" name="descricao" id="descricao" required/>
                </div>
                </div>

                <div class="col-md-12">
                <br>
                    <table id="tbl-area_avaliar_item" class="table table-sm table-hover">
                        <thead>

                            <tr>
                                <th scope="col">Tipo de avaliação técnica</th>
                                <th scope="col">Descrição</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>

                <div class="modal-footer">
                <button type='submit' class='btn btn-primary'>Salvar</button>
                </div>
            </div>
        </div>
    </form>
</div>

HTML Rendering

I’m not using css external, only bootstrap

<div id="frmNovaAvaliacao" style="overflow-y: auto; display: block;" class="modal fade in" role="dialog" aria-hidden="false">
<div class="modal-dialog" role="document">
    <form class="form-horizontal" onsubmit="salva_avaliacao(); return false;" style="margin-bottom:0">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel"></h3>
            </div>
            <div class="modal-body">
                <div class="col-md-12" style="margin-bottom:30px;">
                    <input style="float:right; border-radius:2px" type="text" name="data_avaliacao" id="data_avaliacao" placeholder="dd/mm/yyyy"> </div>
                <input id="cod_escola" type="hidden" name="cod_escola" value="301">
                <input id="cod_atleta_area_avaliar" type="hidden" name="cod_atleta_area_avaliar" value="0">
                <input id="cod_atleta" type="hidden" name="cod_atleta" value="353">
                <!-- Montar formulario pelo JS -->
                <div id="inputs_avaliacao_hidden"></div>
                <div id="inputs_avaliacao">
                    <div class="col-md-12">
                        <p style="font-weight: bold; font-size:18px; background-color: #0D80BF; color:white;" class="text-center"><span>Aspecto Fisico</span></p>
                        <label for="45">Velocidade:</label>
                        <select style="width:65px;" class="form-control" id="item_45" name="item_45">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <label for="20">Força:</label>
                        <select style="width:65px;" class="form-control" id="item_20" name="item_20">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <label for="19">Biotipo:</label>
                        <select style="width:65px;" class="form-control" id="item_19" name="item_19">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <p style="font-weight: bold; font-size:18px; background-color: #0D80BF; color:white;" class="text-center"><span>Habilidade motora</span></p>
                        <label for="52">Condução/controle de bola:</label>
                        <select style="width:65px;" class="form-control" id="item_52" name="item_52">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <label for="53">Desarme:</label>
                        <select style="width:65px;" class="form-control" id="item_53" name="item_53">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <label for="55">Passe:</label>
                        <select style="width:65px;" class="form-control" id="item_55" name="item_55">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <label for="56">Drible:</label>
                        <select style="width:65px;" class="form-control" id="item_56" name="item_56">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <label for="57">Chute:</label>
                        <select style="width:65px;" class="form-control" id="item_57" name="item_57">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <label for="58">Cabeceio:</label>
                        <select style="width:65px;" class="form-control" id="item_58" name="item_58">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <p style="font-weight: bold; font-size:18px; background-color: #0D80BF; color:white;" class="text-center"><span>Inteligencia de jogo</span></p>
                        <label for="23">Tomada de decisão:</label>
                        <select style="width:65px;" class="form-control" id="item_23" name="item_23">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <label for="51">Tática individual:</label>
                        <select style="width:65px;" class="form-control" id="item_51" name="item_51">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <label for="22">Criatividade:</label>
                        <select style="width:65px;" class="form-control" id="item_22" name="item_22">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <label for="28">Liderança:</label>
                        <select style="width:65px;" class="form-control" id="item_28" name="item_28">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <label for="50">Competitividade:</label>
                        <select style="width:65px;" class="form-control" id="item_50" name="item_50">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <p style="font-weight: bold; font-size:18px; background-color: #0D80BF; color:white;" class="text-center"><span>Teste de avaliacao</span></p>
                        <label for="62">Item 2:</label>
                        <select style="width:65px;" class="form-control" id="item_62" name="item_62">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <label for="63">Item 1:</label>
                        <select style="width:65px;" class="form-control" id="item_63" name="item_63">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                </div>
                <p style="font-weight: bold;">Legenda: </p>
                <p style="font-size:12px;"> <em>(10)</em> Excelente A - <em>(9)</em> Excelente B - <em>(8)</em> Bom A - <em>(7)</em> Bom B - <em>(6)</em> Regular A - <em>(5)</em> Regular B - <em>(4)</em> Fraco A - <em>(3)</em> Fraci B - <em>(2)</em> Péssimo A - <em>(1)</em> Péssimo B </p>
                <div class="form-group" style="margin: 30px 0 30px 0;">
                    <p style="font-weight: bold; font-size:18px; background-color: #0D80BF; color:white;" class="text-center"><span>Relatório aprovação/reprovação</span></p>
                    <textarea class="form-control" rows="5" id="relatorio" name="relatorio"></textarea>
                </div>
                <br>
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-6">
                            <label for="treinador">Treinador</label>
                            <input type="text" class="form-control" name="treinador" id="treinador"> </div>
                        <div class="col-md-6">
                            <label for="preparador">Preparador Fisico</label>
                            <input type="text" class="form-control" name="preparador" id="preparador"> </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-6">
                            <label for="supervisor">Supervisor</label>
                            <input type="text" class="form-control" name="supervisor" id="supervisor"> </div>
                        <div class="col-md-6">
                            <label for="coordenador">Coordenador Técnico</label>
                            <input type="text" class="form-control" name="coordenador" id="coordenador"> </div>
                    </div>
                </div>
            </div>
            <br>
            <div class="modal-footer" style="margin-top:20%;">
                <button id="btn_salvar_avaliacao" type="submit" class="btn btn-primary">Salvar</button>
            </div>
        </div>
    </form>
</div>

html jquery html5 twitter-bootstrap bootstrap-3

2 answers

1


I don’t have an environment that can test your code, but I can assure you that by label within a div like you did here:

form += '<div><label for=\"'+data[i]['cod_area_avaliar_item']+'\">'+data[i]['descricao_item']+':</label></div>';

To div will cause the "line to break" because a div occupies 100% of the width of the screen because it is a block type element and does not let anything be next to it. So with the label within the div the line breaks and plays the select for bottom line. To tidy up take the label from within the div

form += '<label for=\"'+data[i]['cod_area_avaliar_item']+'\">'+data[i]['descricao_item']+':</label>';

EDIT

But since you are using Bootrstrap 3, the correct is to follow what the documentation says with you can see here: https://getbootstrap.com/docs/3.3/css/#Forms-inline

Add .form-inline to your form (which doesn’t have to be a <form>) for left-Aligned and inline-block Controls. This only applies to Forms Within viewports that are at least 768px wide.

PORTUGUÊS "Add .form-inline to his form (that doesn’t need to be a <form>) for left-aligned and block-aligned controls. This applies only to forms in viewports at least 768px wide."

But keep in mind that on screens smaller than 768px the form will always stay with the label above the other element below

EDIT2

I believe that some things are not working because they are at odds with the documentation, like some elements need to be direct children of others etc... But you can use the idea of form-horizontal, that way you separate the label in a col-xs-2, and select in another col-xs-10 This will ensure that one will be on the other’s side.

Another way is to put in label float-left as soon as it comes down floats next to the label

I made the two models in the code below

  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

  
    <div id="frmNovaAvaliacao" style="overflow-y: auto; display: block;" class="modal fade in" role="dialog" aria-hidden="false">
        <div class="modal-dialog" role="document">
            <form class="form-horizontal" onsubmit="salva_avaliacao(); return false;" style="margin-bottom:0">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3 id="myModalLabel"></h3>
                    </div>
                    <div class="modal-body">
                        <div class="col-md-12" style="margin-bottom:30px;">
                            <input style="float:right; border-radius:2px" type="text" name="data_avaliacao" id="data_avaliacao" placeholder="dd/mm/yyyy"> </div>
                        <input id="cod_escola" type="hidden" name="cod_escola" value="301">
                        <input id="cod_atleta_area_avaliar" type="hidden" name="cod_atleta_area_avaliar" value="0">
                        <input id="cod_atleta" type="hidden" name="cod_atleta" value="353">
                        <!-- Montar formulario pelo JS -->
                        <div id="inputs_avaliacao_hidden"></div>
                        <div id="inputs_avaliacao">
                            <div class="col-md-12 form-group">
                                <p style="font-weight: bold; font-size:18px; background-color: #0D80BF; color:white;" class="text-center"><span>Aspecto Fisico</span></p>
                                <div class="col-xs-2"><label for="45">Velocidade:</label></div>
                                <div class="col-xs-10">
                                  <select style="width:65px;" class="form-control" id="item_45" name="item_45">
                                      <option value="--" disabled="" selected="">---</option>
                                      <option value="10">10</option>
                                      <option value="9">9</option>
                                      <option value="8">8</option>
                                      <option value="7">7</option>
                                      <option value="6">6</option>
                                      <option value="5">5</option>
                                      <option value="4">4</option>
                                      <option value="3">3</option>
                                      <option value="2">2</option>
                                      <option value="1">1</option>
                                  </select>
                                </div>
                                <br>
                            </div>
                            <div class="col-md-12">
                                <label for="20" style="float:left">Força:</label>
                                <select style="width:65px;" class="form-control" id="item_20" name="item_20">
                                    <option value="--" disabled="" selected="">---</option>
                                    <option value="10">10</option>
                                    <option value="9">9</option>
                                    <option value="8">8</option>
                                    <option value="7">7</option>
                                    <option value="6">6</option>
                                    <option value="5">5</option>
                                    <option value="4">4</option>
                                    <option value="3">3</option>
                                    <option value="2">2</option>
                                    <option value="1">1</option>
                                </select>
                                <br>
                            </div>
                            
                            <div class="col-md-12">
                                <label for="63">Item 1:</label>
                                <select style="width:65px;" class="form-control" id="item_63" name="item_63">
                                    <option value="--" disabled="" selected="">---</option>
                                    <option value="10">10</option>
                                    <option value="9">9</option>
                                    <option value="8">8</option>
                                    <option value="7">7</option>
                                    <option value="6">6</option>
                                    <option value="5">5</option>
                                    <option value="4">4</option>
                                    <option value="3">3</option>
                                    <option value="2">2</option>
                                    <option value="1">1</option>
                                </select>
                                <br>
                            </div>
                        </div>
                        <p style="font-weight: bold;">Legenda: </p>
                        <p style="font-size:12px;"> <em>(10)</em> Excelente A - <em>(9)</em> Excelente B - <em>(8)</em> Bom A - <em>(7)</em> Bom B - <em>(6)</em> Regular A - <em>(5)</em> Regular B - <em>(4)</em> Fraco A - <em>(3)</em> Fraci B - <em>(2)</em> Péssimo A - <em>(1)</em> Péssimo B </p>
                        <div class="form-group" style="margin: 30px 0 30px 0;">
                            <p style="font-weight: bold; font-size:18px; background-color: #0D80BF; color:white;" class="text-center"><span>Relatório aprovação/reprovação</span></p>
                            <textarea class="form-control" rows="5" id="relatorio" name="relatorio"></textarea>
                        </div>
                        <br>
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="treinador">Treinador</label>
                                    <input type="text" class="form-control" name="treinador" id="treinador"> </div>
                                <div class="col-md-6">
                                    <label for="preparador">Preparador Fisico</label>
                                    <input type="text" class="form-control" name="preparador" id="preparador"> </div>
                            </div>
                            <br>
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="supervisor">Supervisor</label>
                                    <input type="text" class="form-control" name="supervisor" id="supervisor"> </div>
                                <div class="col-md-6">
                                    <label for="coordenador">Coordenador Técnico</label>
                                    <input type="text" class="form-control" name="coordenador" id="coordenador"> </div>
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="modal-footer" style="margin-top:20%;">
                        <button id="btn_salvar_avaliacao" type="submit" class="btn btn-primary">Salvar</button>
                    </div>
                </div>
            </form>
        </div>

  • I’ve removed the div, but to no avail :(

  • By inspecting, select is occupying 100%, but I can not decrease it.

  • @Guilhermerigotti already know what it is, I’ll edit it’s in the Bootstrap documentation including

  • I had already removed the div friend, but without success !

  • @Guilhermerigotti see the Edit link

  • I had already added the tags form-inline but unsuccessfully, I’m testing it on my computer screen and it’s still wrong :(, label fields are taking up little space, select fields are taking up all their space even though they are small, maybe that’s why he broke the line. How could I resize these select

  • @Guilhermerigotti cara copies the HTML code as it appears in the Browser, from a Ctrl+U and takes the already rendered code and pastes it in your question, include tb what you have of CSS, just so it will give you an accurate answer...

  • Remember that they also have the forms horizontais who also leave the input on the same line as the label. All that remains is whether you want them all on one line or each double label-input on your line.

  • I corrected now when I saw your comment in the other reply. hahah

  • @fernandosavio Boa

  • @fernandosavio Each double `label/input' on a line. I edited the question as requested @hugocsl

  • There @hugocsl, is the horizontal form itself. Just edit the example and run to the hug

  • @fernandosavio I removed the form-control and with the form-horizontal I did, however, get the select became small and lost the bootstrap style.

  • If you read the documentation Linkei in the comment above you will see that the class .form-horizontal shall be placed in the <form> while the class .form-control should be placed in the <input>, <textarea> and <select>.

  • When I put the class on form-horizontal in the form and form-control us select. It doesn’t work.

  • @Guilhermerigotti looks at Edit 2, can help you solve the situation...

  • @fernandosavio think it does not work because some elements need to be direct children of others, what does not happen in his structure...

Show 12 more comments

1

Just declare the class form-inline on your form.

Upshot: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<br><br>
<form class="form-inline"> 
  
    <div class="form-group">
       <label for="inputPassword6">Password</label>
       <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    </div>    
    
    <div class="form-group">
        <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
    </div>
  
  <div class="form-group">
      <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Settings</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">Exemplo</option>
    <option value="2">Exemplo</option>
    <option value="3">Exemplo</option>
  </select>
  </div>
  
</form>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Example taken from documentation.

Browser other questions tagged html jquery html5 twitter-bootstrap bootstrap-3

You are not signed in. Login or sign up in order to post.