Align textbox in the center of a page using Asp.net bootstrap

Question

Align textbox in the center of a page using Asp.net bootstrap

Asked 8 years ago

Viewed 737 times

1

I can’t centralize the email and password textbox. Follow part of the code and image to help.

<body>
    <form id="form1" runat="server">

        <!--Começo cabeçalho-->
        <header>
            <nav class="navbar-inverse navbar-fixed-top">
                <div class="navbar-header">
                    <a href="../Default.aspx" class="navbar-brand">Anqui</a>
                    <button type="button" data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle">Menu</button>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="About.aspx">About</a></li>
                        <li><a href="#">Blog</a></li>
                        <li class="dropdown">

                        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Entre<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="Login.aspx">Login</a></li>
                                <li><a href="Cadastro.aspx">Cadastro</a></li>
                            </ul>
                        </li>
                    </ul>
                    <div class="navbar-form navbar-right">
                        <div class="form-group">
                            <input type="text" placeholder="Search" class="form-control"/>
                        </div>
                        <input type="submit" value="Buscar" class="btn btn-default"/>
                    </div>
                </div>
            </nav>
        </header>
        <!--Fim cabeçalho-->
        <main>
                <div class="col-xs-12 col-md-12 text-center">
                    <div class="text-center">
                        <h2>Faça login para continuar</h2>
                        <p>Faça seu login usando seu e-mail e senha</p>
                    </div>
                    <div class="col-xs-12 col-md-12 text-center">
                        <figure>
                            <img src="../Images/imagem-login.jpg" alt="imagem de login" class="img-circle"/>
                        </figure>
                    </div>

                    <div>
                        <asp:TextBox ID="txtEmail" runat="server" placeholder="Entre com seu e-mail" width="25%" CssClass="form-control"/></br>
                        <asp:TextBox ID="txtSenha" runat="server" placeholder="Senha" width="25%" CssClass="form-control" /></br>
                    </div>

                    <div class="btn-group">
                        <asp:Button ID="btnLogin" runat="server" Text="Fazer login" CssClass="btn btn-default" OnClick="btnLogin_Click" />
                    </div>
                </div>
        </main>

        <footer class="navbar-fixed-bottom">
            Anqui © 2016 - Todos os direitos reservados.
        </footer>

            <asp:ScriptManager ID="ScriptManager1" runat="server">
                <Scripts>
                    <asp:ScriptReference Path="../Scripts/jquery-1.9.0.min.js"/>
                    <asp:ScriptReference Path="../Scripts/bootstrap.min.js"/>
                </Scripts>
            </asp:ScriptManager>
    </form>
</body>

1 answer

Browser other questions tagged asp.net twitter-bootstrap vertical-align

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

by Cassio Goes • 51 points · Answer 1 · 2016-11-08T02:45:58+00:00

I solved with a container and same grid system.

<div class="container-fluid">
                        <div class="row col-xs-12 col-md-4 col-md-offset-4">
                            <div>
                                <div>
                                    <asp:TextBox ID="txtEmail" runat="server" placeholder="Entre com seu e-mail" CssClass="form-control" />
                                </div>
                                </br>
                                <div>
                                    <asp:TextBox ID="txtSenha" runat="server" placeholder="Senha" CssClass="form-control" />
                                </div>
                                <div class="btn-group">
                                    <asp:Button ID="btnLogin" runat="server" Text="Fazer login" CssClass="btn btn-primary" OnClick="btnLogin_Click" />
                                </div>
                            </div>
                        </div>
                    </div>