ASP.NET Controls Don't Span Bootstrap Columns

Question

I am using Bootstrap 3.5 with ASP.NET controls (Visual Studio 2022). I have an ASP.NET:TextBox in a Bootstrap column. While an HTML input tag spreads across the entire Bootstrap column, left to right, the ASP.NET:TextBox does not. It's width is greatly shorter than the the column width.

I am using codebehind to populate the page with a servertransfer from another page which works quite well with ASP.NET controls, so I don't want to use the the html tags.

How do I get the Bootstrap formatting to spread across the Bootstrap columns correctly with ASP.NET controls?

Yes, some code and an illustration would be great.

Here is the code I have for the page in question.

<formview id="ProviderEdit" runat="server">
<div class="form-group, form-horizontal">
    <div class="row" runat="server">
            <div class="col-md-1" style="padding-top:7px;">
                <asp:label ID="lblProviderName" CssClass="control-label" Text="Provider Name" Visible="true" runat="server"></asp:label>
            </div>
            <div class="col-md-6" style="padding-top:7px;">
                <asp:TextBox ID="txtProviderName" Font-Size="Large" Font-Bold="true" CssClass="form-control" runat="server" Visible="true" ReadOnly="true" AutoPostBack="false"></asp:TextBox>

<%-- Provider Name --%> <asp:label ID="lblAcctType" CssClass="control-label" Text="Acct Type" Visible="true" runat="server"></asp:label> <asp:TextBox ID="txtAcctType" runat="server" Visible="true" CssClass="form-control" AutoPostBack="false"></asp:TextBox> <asp:label ID="lblUpdate" CssClass="control-label" Text="Updated" Visible="true" runat="server"></asp:label> <asp:TextBox ID="txtUpdated" runat="server" Visible="true" CssClass="form-control" AutoPostBack="false"></asp:TextBox> <asp:label ID="lblAddress" CssClass="control-label" Text="Address" Visible="true" runat="server"></asp:label> <asp:TextBox ID="txtAddress" runat="server" Visible="true" CssClass="form-control" AutoPostBack="false"></asp:TextBox> <asp:label ID="lblCity" CssClass="control-label" Text="City" Visible="true" runat="server"></asp:label> <asp:TextBox ID="txtCity" runat="server" Visible="true" CssClass="form-control" AutoPostBack="false"></asp:TextBox> <asp:TextBox ID="txtState" runat="server" Visible="true" CssClass="form-control" AutoPostBack="false"></asp:TextBox> <asp:label ID="lblZip" CssClass="control-label" Text="Zip" Visible="true" runat="server"></asp:label> <asp:TextBox ID="txtZip" runat="server" Visible="true" CssClass="form-control" AutoPostBack="false"></asp:TextBox>

The result is this: (You can see that provider Name's textbox should fit the whole col-md-6 column width but doesn't)

Not all the code appeared in my edit as code. Here it is again.

<formview id="ProviderEdit" runat="server">
<div class="form-group, form-horizontal">
    <div class="row" runat="server">
            <div class="col-md-1" style="padding-top:7px;">
                <asp:label ID="lblProviderName" CssClass="control-label" Text="Provider Name" Visible="true" runat="server"></asp:label>
            </div>
            <div class="col-md-6" style="padding-top:7px;">
                <asp:TextBox ID="txtProviderName" style="width:100%" Font-Size="Large" Font-Bold="true" CssClass="form-control" runat="server" Visible="true" ReadOnly="true" AutoPostBack="false"></asp:TextBox>
            </div>
            <div class="col-md-1" style="padding-top:7px;">
                <asp:label ID="lblAcctType" CssClass="control-label" Text="Acct Type" Visible="true" runat="server"></asp:label>
            </div>
            <div class="col-md-2" style="padding-top:7px;">
                <asp:TextBox ID="txtAcctType" runat="server" Visible="true" CssClass="form-control" AutoPostBack="false"></asp:TextBox>
            </div>
            <div class="col-md-1" style="padding-top:7px;">
                <asp:label ID="lblUpdate" CssClass="control-label" Text="Updated" Visible="true" runat="server"></asp:label>
            </div>
            <div class="col-md-1" style="padding-top:7px;">
                <asp:TextBox ID="txtUpdated" runat="server" Visible="true" CssClass="form-control" AutoPostBack="false"></asp:TextBox>
            </div>
    </div>
    <div class="row" runat="server">
            <div class="col-md-1" style="padding-top:7px;">
                <asp:label ID="lblAddress" CssClass="control-label" Text="Address" Visible="true" runat="server"></asp:label>
            </div>
            <div class="col-md-6" style="padding-top:7px;">
                <asp:TextBox ID="txtAddress" runat="server" Visible="true" CssClass="form-control" AutoPostBack="false"></asp:TextBox>
            </div>
            <div class="col-md-1" style="padding-top:7px;">
                <asp:label ID="lblCity" CssClass="control-label" Text="City" Visible="true" runat="server"></asp:label>
            </div>
            <div class="col-md-1" style="padding-top:7px;">
                <asp:TextBox ID="txtCity" runat="server" Visible="true" CssClass="form-control" AutoPostBack="false"></asp:TextBox>
            </div>
            <div class="col-md-1" style="padding-top:7px;">
                <asp:TextBox ID="txtState" runat="server" Visible="true" CssClass="form-control" AutoPostBack="false"></asp:TextBox>
            </div>
            <div class="col-md-1" style="padding-top:7px;">
                <asp:label ID="lblZip" CssClass="control-label" Text="Zip" Visible="true" runat="server"></asp:label>
            </div>
            <div class="col-md-1" style="padding-top:7px;">
                <asp:TextBox ID="txtZip" runat="server" Visible="true" CssClass="form-control" AutoPostBack="false"></asp:TextBox>
            </div>
    </div>
    </div>
</formview>

Thank you for your quick response. I tried your suggestion of adding a width of 100% to the textbox but it doesn't stretch the TextBox like it does in your example when the textbox is in a table. You can see I added it in the code I have copied this second time. The result was identical to the first illustration I sent.

It would be helpful if you could provide a minimal, reproduceable example of the problem you've described. — devlin carnate
– devlin carnate, Commented Nov 10 at 22:20
well, a HTML table is VAST VAST different then columns used in bootstrap layouts, and as such, bootstrap layouts are NOT a table, and have zero to do with tables in general. So, you using bootstrap columns - not some HTML table. So, this is a vast different road and a different solution is required - one that is not related to a HTML table at all. For such layout, you could try using col-md-11 in place of col-md-6. And do you really need to use BS columns, or would just a few floats suffice here? — Albert D. Kallal
– Albert D. Kallal, Commented Nov 11 at 20:06

Albert D. Kallal · Accepted Answer · 2025-11-11 02:32:26Z

Ok, let's assume this GridView (it renders a table).

<asp:GridView ID="GVHotels" runat="server" AutoGenerateColumns="False"
DataKeyNames="ID" 
    CssClass="table table-hover"
Width="50%">
<Columns>
    <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
    <asp:BoundField DataField="LastName" HeaderText="LastName" />
    <asp:BoundField DataField="City" HeaderText="City" />
    <asp:TemplateField HeaderText="Hotel Name">
        <ItemTemplate>
            <asp:TextBox ID="txtHotel" runat="server"
                Text = '<%# Eval("HotelName") %>'
                >
            </asp:TextBox>
        </ItemTemplate>
    </asp:TemplateField>

    <asp:TemplateField ItemStyle-HorizontalAlign="Center">
        <ItemTemplate>
            <asp:ImageButton ID="cmdDel" runat="server"
                OnClick="cmdDel_Click"
                OnClientClick="return mydelete(this)"
                ImageUrl="~/Content/trashcan1.png"
                Width="48" />
        </ItemTemplate>
    </asp:TemplateField>
</Columns>
</asp:GridView>

And note how we bootstrap the GridView (table) with this:

    CssClass="table table-hover"

And our code behind to load above is this:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        If Not IsPostBack Then
            LoadGrid
        End If
    End Sub

    Sub LoadGrid()

        Dim strSQL As String =
            "SELECT * FROM tblHotels
            WHERE Description is not null
            ORDER BY HotelName"

        GVHotels.DataSource = MyRst(strSQL)
        GVHotels.DataBind()

    End Sub

And the result is now this:

Note close how the textbox in the table does not fill out the whole column.

So, just add to the TextBox a style to fill out 100% of that column.

So, say this:

                <asp:TemplateField HeaderText="Hotel Name">
                    <ItemTemplate>
                        <asp:TextBox ID="txtHotel" runat="server"
                            Text = '<%# Eval("HotelName") %>'
                             Style="width:100%" >
                        </asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>

And now the result is this:

So, in most cases, just add some CSS (style) to the given control. Set the width = 100% as per above. This should result in the given control filling out the width (available space) for the given column.

Collectives™ on Stack Overflow

ASP.NET Controls Don't Span Bootstrap Columns

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related