CODEWITHSUNDEEP
cssasp.nettwitter-bootstrap
BRBT
BRBT

Reputation: 1487

bootstrap asp.net textbox does not center properly

I have a login form and I am trying to center all my labels and textboxes. I have the labels aligning properly and seems to be working responsively when I re-size my window.

However my textboxes are not centering at all, regardless of the screen resolution.

<div id="login" class="container">
    <div class="row">

        <div class="col-xs-12 text-center form-group">

            <h3>Login</h3>

            <!--username-->
            <asp:Label ID="lblUsername" runat="server" Text="Username" CssClass="label label-default"></asp:Label>
            <div class="">
                <asp:TextBox ID="txtUsername" runat="server" Width="170px" CssClass="form-control"></asp:TextBox>
                <asp:RequiredFieldValidator ID="rfvUsername" runat="server"
                    ControlToValidate="txtUsername"
                    ErrorMessage="Please enter your username."
                    ForeColor="Red">
                </asp:RequiredFieldValidator>
            </div>

            <!--password-->
                <asp:Label ID="lblPassword" runat="server" Text="Password" CssClass="label label-default"></asp:Label>
                <div class="">
                    <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Width="170px" CssClass="form-control"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="rfvPassword" runat="server"
                        ControlToValidate="txtPassword"
                        ErrorMessage="Please enter your password."
                        ForeColor="Red">
                    </asp:RequiredFieldValidator>
                </div>

            <!--login/cancel buttons-->
            <asp:Button ID="btnLogin" runat="server" Text="Login" CssClass="btn btn-primary top-buffer" />
        </div>
    </div>
</div>

This is what it looks like..and for some reason it is constantly pulling to the left side.

enter image description here

How can I properly align my textboxes and keep them responsive using bootstrap classes?

Upvotes: 0

Views: 1210

Answers (1)

D&#234;nis Fernandes
D&#234;nis Fernandes

Reputation: 174

This happens because the form inputs are displayed as block, so the class "text-center" only affect inline elements

You can use a wraper for your entire form and then set a fixed width with margin:0 auto; property.

See this example: http://getbootstrap.com/examples/signin/

Or maybe you can use the offset class from bootstrap http://getbootstrap.com/css/#grid-offsetting

Cheers

Upvotes: 2

Related Questions