Label and input on the same line

Asked

Viewed 2,485 times

2

Hello, I am using bootstrap to build my html page and am having a problem with form-control.

I would like my label and my input to be on the same line, close to each other, but the most I could get was this:

inserir a descrição da imagem aqui

that is still not enough, I feel that are far away yet.

my code is this:

        <div class="card">
            <div class="card-header text-center">
                <b>Período</b>
            </div>
            <div class="card-body">
                <div class="row float-left w-100">
                        <div class="col-3">
                        <label for="dt_in"><b>Data Inicial: </b></label>
                    </div>
                    <div class="col-3">
                        <input type="date" class="form-control" id="dt_in">
                    </div>
                </div>
            </div>
        </div>

How do I leave them together?

OBS: I put this row and these col for the input was staying in the line below, and not in the same line as label.

Another thing, I would like to vertically align this label, because compared to input, it prays to be higher.

EDIT 1:

I’m still having some problems, I’ll leave the print on the question, if you can take a look at how you’re doing, I appreciate it. The elements are still not the right way, and if you notice the card header, it is wrong on the sides, ends up where it was not to end know. Anyway, there will be the print

inserir a descrição da imagem aqui

EDIT 2:

inserir a descrição da imagem aqui

My form:

<form action="#" method="post" class="form-inline">
                @***CARD PERIODO***@
                <div class="card w-100">
                    <div class="card-header text-center">
                        <b>Período</b>
                    </div>
                    <div class="card-body float-left w-100">

                            <div class="form-group col-6 mb-2">
                                <label class="switch mt-2 form-check-label"><input type="checkbox"><span class="slider round"></span></label>
                                <label class="form-check-label mr-2" for="dt_in"><b>Data Inicial: </b></label>
                                <input type="date" class="form-control" id="dt_in">
                            </div>
                            <div class="form-group col-6 mb-2">
                                <label class="switch mt-2 form-check-label"><input type="checkbox"><span class="slider round"></span></label>
                                <label class="form-check-label mr-2" for="dt_in"><b>Hora Inicial: </b></label>
                                <input type="time" class="form-control" id="hr_in">
                            </div>

                            <div class="form-group col-6 mb-2">
                                <label class="switch mt-2 form-check-label"><input type="checkbox"><span class="slider round"></span></label>
                                <label class="form-check-label mr-2" for="dt_in"><b>Data Final: </b></label>
                                <input type="date" class="form-control" id="dt_fim">
                            </div>
                            <div class="form-group col-6 mb-2">
                                <label class="switch mt-2 form-check-label"><input type="checkbox"><span class="slider round"></span></label>
                                <label class="form-check-label mr-2" for="dt_in"><b>Hora Final: </b></label>
                                <input type="time" class="form-control" id="hr_fim">
                            </div>

                    </div>
                </div>

                <br>

                @***CARD SELEÇÕES***@
                <div class="card mt-3 w-100">
                    <div class="card-header text-center">
                        <b>Seleções</b>
                    </div>
                    <div class="card-body float-left w-100">

                            <div class="form-group col-12 d-flex justify-content-between">
                                <label class="form-check-label mr-2" for="cl_1"><b>Cliente 1: </b></label>
                                <div class="inputWithIcon">
                                    <input name="cl_1" id="cl_1" class="form-control pl-2" type="text" maxlength="50">
                                    <a id="pesquisaCliente1" onclick="pesqC1"><i class="fas fa-search olho mt-2"></i></a>
                                </div>

                                <label class="form-check-label mr-2" for="produto"><b>Produto: </b></label>
                                <div class="inputWithIcon">
                                    <input name="produto" id="produto" class="form-control pl-2" type="text" maxlength="50">
                                    <a id="pesquisaProduto" onclick="pesqP"><i class="fas fa-search olho mt-2"></i></a>
                                </div>

                                <label class="form-check-label mr-2" for="func_1"><b>Func. 1: </b></label>
                                <div class="inputWithIcon">
                                    <input name="func_1" id="func_1" class="form-control pl-2" type="text" maxlength="50">
                                    <a id="pesquisaFunc1" onclick="pesqF1"><i class="fas fa-search olho mt-2"></i></a>
                                </div>
                            </div>

                    </div>
                </div>

                <br>

                @***CARD PESQUISAS***@
                <div class="card mt-3 w-100">

                    <div class="card-header text-center">
                        <b>Pesquisas</b>
                    </div>

                    <div class="card-body">

                        <div class="inputWithIcon w-50 float-left">
                            <input type="text" name="consulta" id="txt_consulta" autofocus placeholder="Consultar Opções" class="form-control" onkeyup="mudarPesquisaSelect()" style="margin: 0;">
                            <i class="fa fa-search fa-lg fa-fw esq" aria-hidden="true"></i>
                        </div>

                        <select class="form-control w-25 float-right" id="grupo" onchange="mudarPesquisaSelect()">
                            <option value="P">Períodos</option>
                            <option value="A">Análises</option>
                            <option value="S">Seleções</option>
                            <option value="F">Filtros</option>
                            <option value="T">Totalizações</option>
                            <option value="O">Ordem</option>
                            <option value="All">Todos</option>
                        </select>
                        <label class="float-right" style="margin-right: 10px;"><b>Grupos:</b> </label>

                        <br>
                        <br>

                        <div class="">
                            <table id="tabela" class="table table-hover overflow-auto">
                                <thead>
                                    <tr>
                                        <th scope="col">Opções</th>
                                        <th scope="col">Valores</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody">
                                    <tr class="P">
                                        <td class="pesq">1: Data: Cancelamento</td>
                                        <td>
                                            <select class="form-control w-100">
                                                <option value="NA">Não analizar</option>
                                                <option value="S">Sim</option>
                                                <option value="N">Não</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr class="A">
                                        <td class="pesq">140: Analisar fretes: Fob</td>
                                        <td>
                                            <select class="form-control w-100">
                                                <option value="NA">Não analizar</option>
                                                <option value="S">Sim</option>
                                                <option value="N">Não</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr class="S">
                                        <td class="pesq">162: Centro de custo da operação</td>
                                        <td>
                                            <div class="inputWithIconTable w-100">
                                                <input type="text" class="form-control">
                                                <i class="fa fa-search fa-sm fa-fw esq" aria-hidden="true"></i>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="F">
                                        <td class="pesq">205: Filtrar: clientes 1</td>
                                        <td>
                                            <select class="form-control w-100">
                                                <option value="NA">Filtro não informado</option>
                                                <option value="S">Sim</option>
                                                <option value="N">Não</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr class="T">
                                        <td class="pesq">222: Totalizar no nível 1 por </td>
                                        <td>
                                            <select class="form-control w-100">
                                                <option value="NA">Não totalizar</option>
                                                <option value="S">Cliente 1 - Entidade: código</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr class="O">
                                        <td class="pesq">230: 1º ordem </td>
                                        <td>
                                            <select class="form-control w-100">
                                                <option value="NA">Não ordenar</option>
                                                <option value="S">Ascendente</option>
                                                <option value="N">Descendente</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr id="semResultado" style="display: none;">
                                        <td colspan='2'><center>Nenhum resultado foi encontrado</center></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="float-right">
                            <button type="reset" class="btn btn-danger" onclick="mudarPesquisaSelect()"><i class="fa fa-trash"></i> Opções</button>
                            <button type="submit" class="btn btn-success"><i class="fa fa-cogs"></i> Processar</button>
                            <button type="button" class="btn btn-primary" onclick="window.history.back();"><i class="fa fa-undo-alt"></i> Retornar</button>
                        </div>
                    </div>
                </div>
            </form>
html css html5 css3 twitter-bootstrap

  • You could tell which version of bootstrap you’re using and insert your CSS codes as well?

  • @markim Bootstrap 4.3.1. As for css, I am not using this code... only backgound

1 answer

2


You can follow the documentation of inline-Forms Bootstrap to get this layout https://getbootstrap.com/docs/4.0/components/forms/#inline-Forms Note that you don’t need extra CSS or anything like that. Note the tag form you have to declare the class form-inline

Follow the model with your code

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

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header text-center">
                    <b>Período</b>
                </div>
                <div class="card-body float-left w-100">

                    <form class="form-inline">
                        <div class="form-check">
                            <label class="form-check-label" for="dt_in"><b>Data Inicial: </b></label>
                            <input type="date" class="form-control" id="dt_in">
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>

EDIT 1

If you want to have two groups input/label by line you use col-6, if you want just one use col-12, 3 per line col-4 etc... On the top of Card here is normal, maybe you have forgotten some div without closing, put some class in the wrong element...

inserir a descrição da imagem aqui

Follow the image code above

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

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header text-center">
                    <b>Período</b>
                </div>
                <div class="card-body float-left w-100">

                    <form class="form-inline">
                        <div class="col-6 form-group mb-2">
                            <label class="form-check-label" for="dt_in"><b>Data Inicial: </b></label>
                            <input type="date" class="form-control" id="dt_in">
                        </div>
                        <div class="col-6 form-group mb-2">
                            <label class="form-check-label" for="dt_in"><b>Data Inicial: </b></label>
                            <input type="date" class="form-control" id="dt_in">
                        </div>
                        <div class="col-12 form-group mb-2">
                            <label class="form-check-label" for="dt_in"><b>Data Inicial: </b></label>
                            <input type="date" class="form-control w-auto" id="dt_in">
                        </div>
                        <div class="col-md-4 form-group mb-2">
                            <label class="form-check-label" for="dt_in"><b>Data Inicial: </b></label>
                            <input type="date" class="form-control" id="dt_in">
                        </div>
                        <div class="col-md-4 form-group mb-2">
                            <label class="form-check-label" for="dt_in"><b>Data Inicial: </b></label>
                            <input type="date" class="form-control" id="dt_in">
                        </div>
                        <div class="col-md-4 form-group mb-2">
                            <label class="form-check-label" for="dt_in"><b>Data Inicial: </b></label>
                            <input type="date" class="form-control" id="dt_in">
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>

  • Hugo, thank you for the answer. I did not leave so detailed in the question, I apologize. But I will need to put a "start time" in the same line, but in the right corner and then still a "end date" and "end time" in the line below, so I will need to keep creating a form for each line ? I think it is unviable, since then I will need to post all the information. I would have some other way?

  • Actually in the form div is written class="form-check", remove this is put class="form-group col-12". After that you can replicate as many times as you want this Div that they will always be below the other type like http://prntscr.com/o949ov

  • Hugo, I’m still having some problems, I’ll leave the print on the question, if you can take a look at how you’re doing, I appreciate it. The elements are still not the right way, and if you notice the card header, it is wrong on the sides, ends up where it was not to end know. Anyway, there will be the print

  • @Lima see the Edit I left in reply

  • Hugo, if I tag <form> off the card, as it is in my print, it gives some conflict?

  • @File apparently not from any conflict, unless you are repeating Ids or something like http://prntscr.com/o95xep look at the image with the Form outside of the Card,

  • Dude, after a few attempts I managed to fix the header, but the elements don’t stay on the same line at all, I’ll leave my form code in the question. I left the print too so you could see inside what it is.

  • @File in your div card-body missed the class Row, should be <div class="card-body row w-100"> see http://prntscr.com/o96de2 when you are in class Row

  • 1

    Perfect. It worked, thank you.

  • @Young quiet lime!

Show 5 more comments

Browser other questions tagged html css html5 css3 twitter-bootstrap

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