How to center my form with bootstrap leaving responsive;

Asked

Viewed 11,231 times

1

inserir a descrição da imagem aqui 

    <meta name="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>
html5 css3 twitter-bootstrap bootstrap-4

  • I could not understand your doubt, the form is centered and responsive in mine. With print’s would be better to understand what I would like to accomplish.

  • after here on my screen, it’s in the left corner, when I center it with margin-left it doesn’t get responsive;

  • If possible, place images to illustrate your question, please.

  • Okay, I put the image.

  • place the image form inside the div container

  • Iramar if my answer helped you in any way consider marking it as accepted in this one on the left side near the little arrows. Just click on it, so Stackoverflow works better

Show 1 more comment

2 answers

1


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

In your case I suggest you pass the form-group of col-md-5 for col-md-6, because being multiple of 12 vc achieves 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 right space in the size of 3 columns, and the shape with 6 columns is centered in the middle of the screen.)

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

Official documentation of Grid BS4: https://v4-alpha.getbootstrap.com/layout/grid/#Offsetting-Columns

Official documentation of Flex BS4: https://v4-alpha.getbootstrap.com/utilities/flexbox/

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 you can line them up with the rest of the stuff.

  • Thank you very much brother, helped me a lot with your experience, was breaking my head with this for days, but now with your tips I already have a better notion.

  • Iramar if my answer helped you in any way consider mark it as accepted in this ✔ ai on the left side near the arrows. Just click on it :)

0

The image form is outside the container so you have no alignment along with your form

put this part inside the div container 

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

Browser other questions tagged html5 css3 twitter-bootstrap bootstrap-4

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