Textbox not aligned in ASP.NET Gridview

This is how my textboxes are appeared in the gridview, they are not aligned in the columns.

Attachment 180594

I am adding the textboxes in the footer template.

Can you please help me how to fix this?

Thanks.

Here's the code of my griview, you can check any column having textbox in the footer template.

HTML Code:

---

<asp:GridView ID="gridService" runat="server" AllowPaging="False" AutoGenerateColumns="false" class="table table-bordered" OnPageIndexChanging="GridView1_PageIndexChanging" OnRowCancelingEdit="gridService_RowCancelingUpdate" OnRowCreated="gridService_RowCreated" OnRowDeleting="gridService_RowDeleting" OnRowEditing="gridService_RowEditing" OnRowUpdating="gridService_RowUpdating" PageSize="8" ShowFooter="true">
            <Columns>
                <asp:TemplateField HeaderText="Username" ItemStyle-Width="20%">
                    <ItemTemplate>
                        <asp:Label ID="UsernameLabel" runat="server" Text='<%# Eval("Username")%>'></asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="UsernameNewText" runat="server" Class="form-control"></asp:TextBox>
                    </FooterTemplate>
                    <ItemStyle Width="20%" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Password" ItemStyle-Width="20%">
                    <ItemTemplate>
                        <asp:Label ID="UserPasswordLabel" runat="server" Text="****"></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="UserPasswordtext" runat="server" Text='<%# Eval("UserPassword")%>' TextMode="Password"></asp:TextBox>
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="UserPasswordNewText" runat="server" Class="form-control"></asp:TextBox>
                    </FooterTemplate>
                    <ItemStyle Width="20%" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Admin Module" ItemStyle-Width="10%">
                    <ItemTemplate>
                        <asp:Label ID="AdminModuleLabel" runat="server" Text='<%# Eval("AdminModule")%>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:CheckBox ID="AdminModuleckb" runat="server" Checked='<%# Eval("AdminModule").ToString() == "True" ? true : false %>' />
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:CheckBox ID="AdminModulenewckb" runat="server" />
                    </FooterTemplate>
                    <ItemStyle Width="10%" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Enrollees Module" ItemStyle-Width="10%">
                    <ItemTemplate>
                        <asp:Label ID="EnrolleesModuleLabel" runat="server" Text='<%# Eval("EnrolleesModule")%>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:CheckBox ID="EnrolleesModuleckb" runat="server" Checked='<%# Eval("EnrolleesModule").ToString() == "True" ? true : false %>' />
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:CheckBox ID="EnrolleesModulenewckb" runat="server" />
                    </FooterTemplate>
                    <ItemStyle Width="10%" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Transactions Module" ItemStyle-Width="10%">
                    <ItemTemplate>
                        <asp:Label ID="TransactionsModuleLabel" runat="server" Text='<%# Eval("TransactionsModule")%>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:CheckBox ID="TransactionsModuleckb" runat="server" Checked='<%# Eval("TransactionsModule").ToString() == "True" ? true : false %>' />
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:CheckBox ID="TransactionsModulenewckb" runat="server" />
                    </FooterTemplate>
                    <ItemStyle Width="10%" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Configuration Module" ItemStyle-Width="10%">
                    <ItemTemplate>
                        <asp:Label ID="ConfigurationModuleLabel" runat="server" Text='<%# Eval("ConfigurationModule")%>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:CheckBox ID="ConfigurationModuleckb" runat="server" Checked='<%# Eval("ConfigurationModule").ToString() == "True" ? true : false %>' />
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:CheckBox ID="ConfigurationModulenewckb" runat="server" />
                    </FooterTemplate>
                    <ItemStyle Width="10%" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Statistics Module" ItemStyle-Width="10%">
                    <ItemTemplate>
                        <asp:Label ID="StatisticsModuleLabel" runat="server" Text='<%# Eval("StatisticsModule")%>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:CheckBox ID="StatisticsModuleckb" runat="server" Checked='<%# Eval("StatisticsModule").ToString() == "True" ? true : false %>' />
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:CheckBox ID="StatisticsModulenewckb" runat="server" />
                    </FooterTemplate>
                    <ItemStyle Width="10%" />
                </asp:TemplateField>
                <asp:CommandField ButtonType="Image" CancelImageUrl="~/Content/images/cancel.png" EditImageUrl="~/Content/images/edit.png" ShowEditButton="True" UpdateImageUrl="~/Content/images/update.png" />
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:ImageButton ID="lnkremove" runat="server" CommandArgument='<%# Eval("Username")%>' CommandName="delete" ImageUrl="~/Content/images/delete.png" OnClientClick="return confirm('Do you want to delete?')" Visible='<%# Eval("Username").ToString() == "Admin" ? false : true %>' />
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:Button ID="btnAdd" runat="server" class="btn btn-default" OnClick="AddService" Text="Add" />
                    </FooterTemplate>
                </asp:TemplateField>
                <%--<asp:CommandField ShowDeleteButton='<%# Eval("Username").ToString() == "admin" ? true : false %>' ButtonType="Image"  DeleteImageUrl="~/Content/images/delete.png"/>--%>
            </Columns>
            <FooterStyle HorizontalAlign="Left" />
        </asp:GridView>

---

Below is the related css.

HTML Code:

---

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #8e8e93;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #c7c7cc;
  border-radius: 4px; 
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

---