Centralize login and password fields

Asked

Viewed 87 times

-1

So, I’m making a login system with Bootstrap (learning) and I ended up not being able to leave the Login and Password fields centralized, I managed before but entering a left: 40%, but it ends up being disproportionate, how could I fix it?

Follow code and images of how it is:

<body>
<form id="form1" runat="server">
    <div class="menuLogin">
        <div>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Imagens/Logo" />
        </div>
        <br />
        <div class="input-group" style="position: relative;text-align: center; ">
            <span class="input-group-addon glyphicon glyphicon-user"></span>
            <asp:TextBox ID="TextBox1" runat="server" class="form-control" placeholder="Usuário" aria-describedby="basic-addon1"></asp:TextBox>
        </div>
        <br />
        <div class="input-group">
            <span class="input-group-addon glyphicon glyphicon-lock"></span>
            <asp:TextBox ID="TextBox2" runat="server" class="form-control" placeholder="Senha" type="password" aria-describedby="basic-addon1"></asp:TextBox>
        </div>
        <br />
        <div class="btn btn-primary" style="display: inline-block; text-align: center; width: 150px"> 
            ENTRAR
        </div>

    </div>
</form>

inserir a descrição da imagem aqui

I would also like to know how I could increase the width of the button...

css asp.net bootstrap-3

2 answers

0

Try this here: 

<div class="text-center">

OR

<div class="row d-flex justify-content-center">

Both work, check which one gets better in your case.

  • In which of the Divs do I use these classes?

0


One of the ways to center it is by using the text-center in the <body> exactly as in the example own website of bootstrap:

 <body class="text-center">
   <form class="form-signin">
   </form>
 </body>

Button width can be set by adding classes btn-sm for the button to get smaller, btn-lg to get bigger and btn-block to occupy the whole side. I suggest a read in the documentation: https://getbootstrap.com/docs/4.3/components/buttons/

  • It didn’t work, besides not having the form-signin class, I think it’s only part of 4.3, I have to use only 3.3

  • @Dreidel do the following then, set a width for the form and leave the margin as auto: <form id="form1" runat="server" style="width: 300px; margin: auto">

  • @Dreidel the class form-signin example, not part of bootstrap

  • Now it worked out, thank you so much for the help! : ) And sorry for the slow haha..

Browser other questions tagged css asp.net bootstrap-3

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