Input field does not align with others

Asked

Viewed 51 times

1

For some reason I have not yet discovered the field "Civil State" is not aligned to the field "Availability on Saturday".

I’m not using CSS in this file as it’s just an outline of the final version.

                     <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                            <div class="footer-header"> 
                                <h2 style="color:red;">Trabalhe Conosco</h2> 
                            </div>  
                        </div>              
                    </div><!--row-->
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-3">

                             <form action="envio-curriculo.php" method="post" id="my_form">                       
                                <div><div /><input required="required" type="text" placeholder="Nome Completo" value="" name="nome" id="nome" class="form-control"></div></div><br>
                                <div class="col-md-6"><input required="required" type="email" placeholder="E-mail" value="" name="email" id="email" class="form-control"></div>
                                <div class="col-md-6"><input required="required" name="telefone" placeholder="Telefone para contato" type="text" class="form-control"></div>
                                  <div class="form-group col-md-6">
    <label for="dataNascimento">Data de nascimento</label>
    <input type="date" class="form-control" id="dataNascimento" placeholder="dd/mm/aaaa">
  </div>
                                  <div class="col-md-6">
                                    <label for="setor">Setor Desejado</label>
                                    <select id="setor" class="form-control" >

                                        <option value="Administrativo" style="background-color: black">Administrativo</option>
                                        <option value="Comercial" style="background-color: black">Comercial</option>
                                        <option value="Operacional / Técnico" style="background-color: black">Operacional / Técnico</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                <label for="Disponibilidade">Disponibilidade nos Sabádos</label>
                                <select class="form-control" id="Disponibilidade">
                                  <option value="" style="display: none;"></option>
                                  <option value="Sim">Sim</option>
                                  <option value="nao">Não</option>
                                </select>
                                </div>
                                <div class="col-md-6">
                                  <label for="estadoCivil">Estado Civil</label>
                                  <select id="estadoCivil" class="form-control">
                                    <option value="solteiro">Solteiro(a)</option>
                                    <option value="casado">Casado(a)</option>
                                    <option value="divorciado">Divorciado(a)</option>
                                    <option value="viuvo">Viúvo(a)</option>
                                    <option value="unido">União Estável</option>
                                  </select>
                                </div>

                                <div><textarea id="message" class="form-control" rows="3" name="mensagem" placeholder="Informações Adicionais" style="resize: none;"></textarea></div><br>
                                <div align="center">
                                    <div>
                                        <div style="width: 100%; height: 100%; margin: 10px" class="g-recaptcha" data-sitekey="6LfOUwgUAAAAAEscevglagePmbzPKKRO6NfzUpUl"></div>
                                    </div>
                                </div>

                                <br>
                                 <div class="m-2">
                                        <label class="btn btn-default btn-file" >Anexar Currículo:
                                            <input required="required" type="file" name="curriculo" >
                                        </label>
                                </div>
                                <br>
                                <div><input  class="contact_button button btn btn-primary btn-block" type="submit" name="submit" id="submit_curriculo" value="Enviar" /></div>

                                <div  id="server-results"><!-- For server results --></div>
                            </form> 
                        </div>
                    </div>
                </div>
html twitter-bootstrap

1 answer

4


Guy for Bootstrap’s grid to run a parent col has to be a row, and not just go out putting cols and wait for them to line up. I strongly recommend that you take a moment to take a look at the Bootstrap Grid documentation, it will help you a lot. https://getbootstrap.com/docs/4.0/layout/grid/

Plus there are several divs unnecessary in your code and locked in the wrong place, you have to take care of that not to break the layout.

Look how the code has been fixed.

OBS: Display them all on page to see them side by side, as you put col-md-6 on small screens they stand even above each other

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<style>

</style>
</head>

<body>

    <div class="container">

        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="footer-header">
                    <h2 style="color:red;">Trabalhe Conosco</h2>
                </div>
            </div>
        </div>
        <!--row-->
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">

                <form action="envio-curriculo.php" method="post" id="my_form">
                    <input required="required" type="text" placeholder="Nome Completo" value="" name="nome" id="nome" class="form-control">

                    <br>

                    <div class="row">
                      
                      <div class="col-md-6"><input required="required" type="email" placeholder="E-mail" value="" name="email" id="email" class="form-control"></div>
                      <div class="col-md-6"><input required="required" name="telefone" placeholder="Telefone para contato" type="text" class="form-control"></div>
                      <div class="form-group col-md-6">
                          <label for="dataNascimento">Data de nascimento</label>
                          <input type="date" class="form-control" id="dataNascimento" placeholder="dd/mm/aaaa">
                      </div>
                      <div class="col-md-6">
                          <label for="setor">Setor Desejado</label>
                          <select id="setor" class="form-control">
  
                              <option value="Administrativo" style="background-color: black">Administrativo</option>
                              <option value="Comercial" style="background-color: black">Comercial</option>
                              <option value="Operacional / Técnico" style="background-color: black">Operacional / Técnico</option>
                          </select>
                      </div>
                      <div class="col-md-6">
                          <label for="Disponibilidade">Disponibilidade nos Sabádos</label>
                          <select class="form-control" id="Disponibilidade">
                              <option value="" style="display: none;"></option>
                              <option value="Sim">Sim</option>
                              <option value="nao">Não</option>
                          </select>
                      </div>
                      <div class="col-md-6">
                          <label for="estadoCivil">Estado Civil</label>
                          <select id="estadoCivil" class="form-control">
                              <option value="solteiro">Solteiro(a)</option>
                              <option value="casado">Casado(a)</option>
                              <option value="divorciado">Divorciado(a)</option>
                              <option value="viuvo">Viúvo(a)</option>
                              <option value="unido">União Estável</option>
                          </select>
                      </div>
                    </div>

                    <div><textarea id="message" class="form-control" rows="3" name="mensagem" placeholder="Informações Adicionais" style="resize: none;"></textarea></div><br>
                    <div align="center">
                        <div>
                            <div style="width: 100%; height: 100%; margin: 10px" class="g-recaptcha" data-sitekey="6LfOUwgUAAAAAEscevglagePmbzPKKRO6NfzUpUl"></div>
                        </div>
                    </div>

                    <br>
                    <div class="m-2">
                        <label class="btn btn-default btn-file">Anexar Currículo:
                            <input required="required" type="file" name="curriculo">
                        </label>
                    </div>
                    <br>
                    <div><input class="contact_button button btn btn-primary btn-block" type="submit" name="submit" id="submit_curriculo" value="Enviar" /></div>

                    <div id="server-results">
                        <!-- For server results -->
                    </div>
                </form>
            </div>
        </div>
    </div>



    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>

</html>

  • Thanks for the tip bro, but still the specific field is not aligned here, I do not know if it is for browser reasons or something like

  • Dude if it works here and then it’s probably not pq you have some extra CSS that is disturbing or because you didn’t check the code I put up there, here it is getting like this http://prntscr.com/pmr8em. but logically because it is column 6 only until MD screens, on screens less than this is only one input per line same.

  • the worst is that I copied your code and played there

  • @Souzaelvis if here on the site works, and here at home works, there has to work tb rss, besides I can’t help you anymore, what I can say is that the code above puts the fields side by side, you must be putting something more or less in yours... I suggest copying the answer code and testing insolently in a new file only with Bootstrap for you to test

Browser other questions tagged html twitter-bootstrap

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