Align div bootstrap 4 in the center

Question

Align div bootstrap 4 in the center

Asked 5 years, 10 months ago

Viewed 2,187 times

1

How do I align a particular div in the center with bootstrap 4? I tried with the code below but it didn’t 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>

Your idea would be to leave equal a modal pop up ?

– Glauco Oliveira

2018/12/29 at 11:36
Hello Glauco. It wouldn’t be for modal. The @Will solution solved my problem. Thank you and Happy New Year.

– user24136

2018/12/29 at 13:02

1 answer

Browser other questions tagged twitter-bootstrap

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

by Will • **164** points · Answer 1 · 2018-12-29T11:39:09+00:00

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

hope it helps :D