How to center my form with bootstrapping leaving responsive;

Navigation
1

                          

<metaname="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link rel="stylesheet" href="css/bootstrap.css">

    <link rel="stylesheet" type="text/css" href="estilo.css">


    <title> Cadastro Cliente </title>

  </head>

  <body>

        <div class="form-group">
             <img src="Iuri.png" width="500px" alt="Fuzzy Cardigan"
             class="img-thumbnail img-responsive"  >
        </div>

        <div class="container">

            <form action=""  method="POST" name="formulario" > 

                <div class="form-group">
                    <div class="   col-md-5">
                        <label > Usuário ou E-MAIL</label>
                        <input type="text" name="login" class="form-control " placeholder=" Usuário ou E-MAIL" required="" >    
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-5">
                        <label> SENHA </label>  
                        <input type="password" name="rg" class="form-control" placeholder="SENHA" required="" >
                    </div>
                </div>      


                    <input type="submit" value="Login" class="btn btn-primary" name="">

                <div class="form-check">
                    <label > <input class="form-check-input" type="checkbox" value="" > Lembre-me  </label> 
                </div>
            </form> 
        </div>
  </body>
</html>
    
asked by anonymous 07.03.2018 / 14:19

2 answers

0

The right way to do this is to use the native Bootstrap class offset-md-"

In your case I suggest passing form-group col-md-5 to col-md-6 , because being a multiple of 12 you get a perfect alignment on the screen.

Soon your grid would look like this: <div class="col-md-6 offset-md-3"> (this means that it has a left and a right space in the size of 3 columns, and the 6 column form is centered in the middle of the screen .

To center the image use the Bootstrap native Flex properties: d-flex justify-content-center

Official BS4 Grid Documentation: link

Official Flex BS4 documentation: link

See the result in the example below: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="form-group d-flex justify-content-center">
    <img src="http://placeskull.com/100/100"width="100px" alt="Fuzzy Cardigan"
class="img-thumbnail img-responsive"  >
</div>

<div class="container ">

    <form action=""  method="POST" name="formulario" > 

        <div class="form-group">
            <div class="   col-md-6 offset-md-3">
                <label > Usuário ou E-MAIL</label>
                <input type="text" name="login" class="form-control " placeholder=" Usuário ou E-MAIL" required="" >    
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-6 offset-md-3">
                <label> SENHA </label>  
                <input type="password" name="rg" class="form-control" placeholder="SENHA" required="" >
            </div>
        </div>      

        <div class="form-group">
            <div class="col-md-6 offset-md-3">
                <input type="submit" value="Login" class="btn btn-primary" name="">
                <div class="form-check">
                    <label > <input class="form-check-input" type="checkbox" value="" > Lembre-me  </label> 
                </div>
            </div>
        </div>
    </form> 
</div>

OBS: I also put the buttons inside the form-group so I can align them along with the rest of things.

    
07.03.2018 / 14:40
0

The image form is out of the container so you have not the alignment along with your form

put this part inside div container 

    <div class="form-group">
         <img src="Iuri.png" width="500px" alt="Fuzzy Cardigan"
         class="img-thumbnail img-responsive"  >
    </div>
    
07.03.2018 / 14:44
Set dynamic height for div with javascript Android and iOS platforms error in HttpClient.GetAsync (Uri requestUri) function for redirect URL