Tools:
My team is building a code-behind web application that uses ASP.NET WebForms,.Net Framework 4.8.1, JQuery 3.7, and Bootstrap 5.2. The markups and languages are HTML, CSS, Javascript, and C#. Our IDE is mainly Visual Studio 2022 Enterprise. (I am trying to minimize ASP webforms so rebuilding this (again) in the far future will hopefully be more straightforward.) Please note I haven’t worked with Asp WebForms until recently (MVC, Blazor, etc). My prior employers had moved past that already.

Issue:
I am creating an ASP Web Form subpage “Update Shipping” for the ASP WebForms Master page “Transportation”. I want to use bootstrap grid columns to create a responsive width for some of the div containers. I have already programmed the bootstrap into the code and it sizes the div containers as intended. However, when the users scrolls within the Updateshipment subpage, any section that uses bootstrap grid columns (col-) now ignore the boundaries of the navigation bar. When scrolled, the sections appear over the navigation bar instead of hiding behind it.

Initial load

After scrolling

Code Overview: As said, the ASP Web Form subpage “Update Shipping” is a subpage of the ASP WebForms Master page “Transportation”. Its not the only subpage that is used, so it cannot be incorporated directly in the transportation master page. The subpage uses a mix of ASP.Net Webforms and bootstrap/html forms. The navigation bar is programmed in the Transportation. The UpdateShipment subpage will reside in the div with id=divMainContent”. (Code has been minimized to the necessary info due to our privacy policy. The div of “divMainContent” has not been changed though. No other content is located within it.) In my current code, I have 4 sections that are using bootstrap grid columns, hence 4 sections that are overlapping with the navigation bar.

Code:
UpdateShipping.aspx

<%@ Page Title="Update Shipment Status" Language="C#" MasterPageFile="~/Transportation/Transportation.Master" AutoEventWireup="true" Async="true" CodeBehind="UpdateShipment.aspx.cs" Inherits="Transportation.UpdateShipment" %>

<asp:Content ID="MainContent" ContentPlaceHolderID="cphMainContent" runat="server">
    <form id="frmUpdateShipment" class="form-horizontal" runat="server">
        <h3>Update Shipping Status</h3>
        <asp:ScriptManager runat="server" ID="MainScriptManager" EnableHistory="true" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-2 col-sm-3">
                            <label id="lblShippingIDprefix" class="">ID: </label>
                            <label id="lblShippingID" class=""><i>none </i></label>
                        </div>
                        <div class="col-10 col-sm-9">
                            <label hidden for="txtSearchForShipment">Enter ID: </label>
                            <asp:TextBox runat="server" id="txtSearchForShipment" name="txtSearchForShipiment" ValidationGroup="Search" placeholder=" Search using Shipment ID" MaxLength="30" />
                            <asp:Button runat="server" id="btnSearchForShipment" for="txtSearchForShipment" ValidationGroup="Search" text="Search"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-2 col-sm-3">                            
                            <label>Shipping Log</label>
                            <br />
                            <label>07/14/2025 11:55:22</label> <!--//using as measurement. delete once data calls and sizing is done-->
                        </div>
                        <div class="col-10 col-sm-9">
                            <div>                          
                                <label for="txtAddShippingDetails">Shipping Details</label>
                                <!--add date of remark selected, otherwise default to new-->
                                <i><label for="txtAddShippingDetails" id="txtCurrentStatus"> - New</label></i>
                                <br>
                                <textarea id="txtAddShippingDetails" name="txtAddShippingDetails" class="col-12" rows="20" placeholder="Limited to 200 characters." ValidationGroup="submitDetails" runat="server" maxlength="200"></textarea>  
                            </div>
                            <div>
                                <!--submit section. disable if viewing previous remarks. -->
                                <asp:Button runat="server" id="btnSubmitDetails" for="txtAddShippingDetails" text="Submit" ValidationGroup="submitRemark" />
                            </div>
                        </div>
                    </div>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>

</asp:Content>

Transportation.master Ppage

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Transportation.master.cs" Inherits="Transportation.Transportation" %>
<!DOCTYPE html>

<html>
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Transportation</title>   

    <asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>  
    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>    
   
    <script src="/Scripts/jquery-3.7.0.min.js" type="text/javascript"></script>
    <webopt:bundlereference runat="server" path="/Content/css" />
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="/siteMaster.css" />
    <link rel="stylesheet" type="text/css" href="/Transportation/Transportation.css" />
    <link rel="stylesheet" type="text/css" href="/Content/jquery.dataTables.min.css" />
    <link rel="stylesheet" type="text/css" href="/Content/select.dataTables.min.css" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="/Scripts/DataTables/jquery.dataTables.min.js"></script>
    <script src="/Scripts/DataTables/dataTables.select.min.js"></script>
    <script src="/Scripts/jquery.dialog.js" type="text/javascript"></script>
    <script src="/Transportation/Transportation_Master.js"></script>    
</head>
<body>    
    <div class="screenReaderText">
        <!-- This link allows users to skip menu using tabbed interface, for ADA compliance -->
        <a href="#cphMainContent">Skip to main content</a> 
    </div>

    <div class="divFixedTop">
        <div id="divBanner" class="divBanner">
            <asp:ContentPlaceHolder ID="cphBanner" runat="server" > 
                <div class="siteBanner" >
                    <div class="bannerHeader">
                        <div id="mainCenterServer" class="serverDesignationDev"><p>Development</p></div>    
                    </div>
                </div>
            </asp:ContentPlaceHolder>            
        </div> 
        <div id="divMenu" class="cphDiv" runat="server">            
            <asp:ContentPlaceHolder ID="cphMenu" runat="server">
                <ul class="nav navbar-nav">
                    <li runat="server" id="miExit"><a runat="server" class="nav-header" href="~/Main.aspx" id="pageExit">Initial Shipment</a></li>  
                    <li runat="server" class="hasSubDirectory" id="mihCloseout"><p runat="server" class="nav-header">Update Shipment</p></li>
                    <li runat="server" class="hasSubDirectory" id="mihTransmitOptions"><p runat="server" class="nav-header">Finalize Shipment</p></li>
                    <li runat="server" class="hasSubDirectory" id="Li1"><p runat="server" class="nav-header">Check Shipment Status</p></li>
                </ul>                
            </asp:ContentPlaceHolder>
        </div>
    </div>
    <div id="divMainContent" class="cphDiv">
        <asp:ContentPlaceHolder ID="cphMainContent" runat="server">
        </asp:ContentPlaceHolder>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

Importance of bootstrap: I would really like to stick to using bootstrap due to the textarea where users add comments. Ideally, I would like the textarea to span the remaining width of the section without hardcoding the size. I am able to do so with bootstrap, but no success with CSS width 100% or cols=#. All I need to do is resolve the issue with bootstrap columns overlaying the navigation bar upon scrolling. This could be interpreted as another question, but my main issue is why bootstrap columns and ASP WebForms are not honoring boundaries. I don’t mind if additional info is supplied.

Attempts and Research of Bootstrap and Webforms issue:
I removed the rows and columns completely at one point. The rows did not cause any boundary violations. When I added bootstrap columns back in, the boundary violation occurs (but only for div containers that use bootstrap columns (col-). All packages are updated, have working references, and the dlls are in the bin. Though it wasn’t necessary, I added the html script for bootstrap in the Transportation master page (The transportation page is not actual main page). I tried the standard html (such as using input, bootstrap button, paragraph) and Asp Webforms (such as asp:textbox, asp:button), but the issue was not resolved. Most videos do show bootstrap grids working with ASP Web Forms. However, I really haven’t found one where they scroll to verify if this is an error that is only on our application or there is a compatibility issue. The alternative solutions I found usually required third-party software such as DevExpress. (Feel free to reword that question. Its late. I’)