RegistrationForm In ASP.NET Using Bootstrap

In this artcle i explai you how to design registrationform in asp.net using bootstrap and i am going to design
more number of forms this is sample design 1
Make sure you have to download the bootstrap references in www.bootstrap.com after that use script in your source code
Below is the code just copy and past in your source code and see the result
Example:-
              <div class="container-fluid " style="margin-top:50px; margin-bottom:0px">
            <div class="form-horizontal">
                <div class="row">
                    <div class="col-sm-8 col-sm-offset-4 text-primary">
                        <h2>RegistrationForm</h2>
                    </div>
                </div>

            <div class="form-group">
                <div class="col-sm-4 control-label">
                    <span>FirstName</span>
                </div>
                <div class="col-sm-3">
                    <asp:TextBox ID="txtFirstName" runat="server" CssClass="form-control"></asp:TextBox>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-4 control-label">
                    <span>LastName</span>
                </div>
                <div class="col-sm-3">
                    <asp:TextBox ID="txtLastName" runat="server" CssClass="form-control"></asp:TextBox>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-4 control-label">
                    <span>Country</span>
                </div>
                <div class="col-sm-3">
                    <asp:DropDownList ID="ddlCountry" runat="server" CssClass="form-control">
                        <asp:ListItem Text="Select" Value="-1"></asp:ListItem>
                    </asp:DropDownList>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-4 control-label">
                    <span>State</span>
                </div>
                <div class="col-sm-3">
                    <asp:DropDownList ID="ddlState" runat="server" CssClass="form-control">
                        <asp:ListItem Text="Select" Value="0"></asp:ListItem>
                    </asp:DropDownList>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-4 control-label">
                    <span>Cities</span>
                </div>
                <div class="col-sm-3">
                    <asp:DropDownList ID="ddlCities" runat="server" CssClass="form-control" AutoPostBack="true">
                        <asp:ListItem Text="Select" Value="-1"></asp:ListItem>
                    </asp:DropDownList>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-4 control-label">
                    <span>Email</span>
                </div>
                <div class="col-sm-3">
                    <asp:TextBox ID="txtEmail" runat="server" CssClass="form-control"></asp:TextBox>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-4 control-label">
                    <span>PassWord</span>
                </div>
                <div class="col-sm-3">
                    <asp:TextBox ID="txtPassword" runat="server" CssClass="form-control"></asp:TextBox>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-4 control-label">
                    <span>Confirm PassWord</span>
                </div>
                <div class="col-sm-3">
                    <asp:TextBox ID="txtConformpassword" runat="server" CssClass="form-control"></asp:TextBox>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-4 control-label">
                    <span>UploadImage</span>
                </div>
                <div class="col-sm-3">
                    <asp:FileUpload ID="fileUploadcontrol1" runat="server" CssClass="form-control" AllowMultiple="true" />                  
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-5">
                </div>
                <div class="col-sm-5">
                    <asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="btn btn-primary" />
                    <asp:Button ID="btnReset" runat="server" Text="Reset" CssClass="btn  btn-primary" />
                    <asp:Button ID="btnLogin" runat="server" Text="Login" CssClass="btn btn-primary" />
                </div>
            </div>
        </div>
        </div>  
Output:-

No comments:

Post a Comment