Align bootstrap 4 div in the center

Navigation
0

How do I align a particular div in the center with bootstrap 4? I tried the code below, but it did not work: 

<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>
    
asked by anonymous 29.12.2018 / 12:06

1 answer

0

You can use the classes in your main div 

justify-content-center

and 

align-items-center

The code would look more or less like this: 

     <!-- 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 -->

I hope it helps: D

    
29.12.2018 / 12:39
Connection between two docker containers Flex 3: Adding an image to an AdvancedDataGrid