1

Como faço para alinhar uma determinada div no centro com bootstrap 4? Tentei com o código abaixo, mas não funcionou:

<div class="col-md-12 col-xs-12">
<h3 style="color: #3e4095; font-weight: bold">USUÁRIOS</h3>
   <div style="margin-top: 20px">
       <form class="" action="detalhes-usuarios/" method="post">
        <div class="col-lg-6 col-lg-offset-6">
           <div class="input-group">
              <input type="text" name="Usuario" class="form-control col-md-8" placeholder="Digite o nome do usuario" id="usuario" aria-label="Buscar por nome" aria-describedby="btnGroupAddon2">
              <div class="input-group-prepend">
              <button type="submit" class="input-group-text" id="btnBuscar" style="cursor: pointer"><i class="fas fa-search"></i></button>
            </div>
          </div>
        </div>
     </form>
   </div>
</div>
2
  • Sua idéia seria deixar igual um modal pop up ? 29/12/2018 às 11:36
  • Olá Glauco. Não seria para modal. A solução do @Will resolveu meu problema. Obrigado e Feliz Ano Novo.
    – user24136
    29/12/2018 às 13:02

1 Resposta 1

2

você pode usar as classes na sua div principal

justify-content-center 

e

align-items-center

O código ficaria mais ou menso assim:

     <!-- BOOTSTRAP CSS--> 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
     <!-- BOOTSTRAP CSS--> 

<div class="justify-content-center align-items-center row">
        <div class="col-md-6 align-self-center text-center">
            <h3 style="color: #3e4095; font-weight: bold">USUÁRIOS</h3>
            <div style="margin-top: 20px">
                <form class="" action="detalhes-usuarios/" method="post">
                    <div class="col-md-12 align-self-center text-center">
                        <div class="input-group">
                            <input type="text" name="Usuario" class="form-control" placeholder="Digite o nome do usuario"
                                id="usuario" aria-label="Buscar por nome" aria-describedby="btnGroupAddon2">
                            <div class="input-group-prepend">
                                <button type="submit" class="input-group-text" id="btnBuscar" style="cursor: pointer"><i
                                        class="fas fa-search"></i></button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
   <!-- BOOTSTRAP JS --> 
    <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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 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>
   <!-- BOOTSTRAP JS --> 

espero que ajude :D

2
  • 1
    Obrigado Will. Feliz Ano Novo!
    – user24136
    29/12/2018 às 13:01
  • 1
    De nada, feliz por ajudar. Feliz ano novo para ti também.
    – Will
    29/12/2018 às 14:58

Você deve fazer log-in para responder a esta pergunta.