Bootstrap master page shifting from page to page

jerry898989 — Tue, 21 Jun 2022 14:29:24 +0000

I have a asp.net website that I'm trying to use bootstrap 4.6.1.

I have 2 pages that are using the same master page. When I go from one to another the container shifts to the right a little bit. If the container is defined the same for both, why does it shift?

Could the content be the issue? If so how can I have the container be exact for all the pages?

Below is the master page and the 2 pages that are using it and the container shifts when changing from page 1 to page 2.

Master Page

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="SiteMaster" %>

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    
    <title></title>
    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="" crossorigin="anonymous">
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <style type="text/css">

      .pagetext_header_default {
        font-weight:bold;
         font-family: open-sans, sans-serif;
          font-size: 16px;
      }
       .pagetext_header {
         color:#2f65a7;
         font-weight:bold;
         font-family: open-sans, sans-serif;
          font-size: 16px;
       }
       .pagetext {                  
         font-family: open-sans, sans-serif;
          font-size: 16px;
       }

        .round_text {
          background-color: #00274c;          
        }
         .round_text_lightblue {
          background-color: #2f65a7;          
        }

      /*DESKTOP CSS*/
      @media only screen and (min-device-width: 768px) {
        nav {
          bottom: 0;
        }
        .navbar-nav {
          background-color: #224474;
          bottom: 0;
          width: 910px;
          height: 40px;

        }
          .li_format {
          font-family: open-sans, sans-serif;
          font-size: 20px;
        }
        .MenuFormat {
          font-family: open-sans, sans-serif;
          color: white !important;
          font-weight: 700;
          font-size: 24px;
        }
        .ContactMenu {
          font-family: open-sans, sans-serif;
          color: white !important;
          font-weight: 700;
          font-size: 20px;
          padding-left: 250px !important;
          white-space: nowrap;
          overflow: hidden;
        }
        .ImgText {
            font-family: open-sans, sans-serif;
            color: white;
            font-weight: 600;            
            display:inline-block;
            width:100%;            
            text-align:center;
            justify-content:center;
            padding:10px;
        }
        .hometext {
            font-family: open-sans, sans-serif; 
            font-size: 16px;
        }
        .LangDDL {
         position:relative;
         top:10px;
         left:1000px;
       }       
      }


      /*NOT DESKTOP OR LAPTOP*/
      @media only screen and (max-width: 600px) {
        nav {
          top: 65px;
          right: 0;
          bottom: unset;
        }

        .navbar-nav {
          bottom: 0;
          width: 350px;
        }

        .li_format {
          font-family: open-sans, sans-serif;
          font-size: 14px;
        }

        .MenuFormat {
          font-family: open-sans, sans-serif;
          font-weight: 700;
          font-size: 20px;
          text-align: left;
        }

        .ContactMenu {
          font-family: open-sans, sans-serif;
          font-weight: 700;
          font-size: 20px;
        }
        .ImgText {
          font-family: open-sans, sans-serif;
          color: white;
          font-weight: 600;
          display: inline-block;
          width: 100%;
          text-align: center;
          justify-content: center;
          padding: 10px;
        }
        .HomeImgText {
          font-family: open-sans, sans-serif;
          color: #224474;          
          display: inline-block;
          width: 100%;
          text-align: center;
          justify-content: center;
          padding: 10px;
        }
        .hometext {
          font-family: open-sans, sans-serif;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          width: 100%;
          text-align: center;
          justify-content: center;
          padding: 10px;
        }
      }      
  </style>
  <asp:ContentPlaceHolder ID="head" runat="server">
  </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">
      <asp:ScriptManager runat="server">
          <Scripts>
              <%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
              <%--Framework Scripts--%>
              <asp:ScriptReference Name="MsAjaxBundle" />
              <asp:ScriptReference Name="jquery" />
              <asp:ScriptReference Name="bootstrap" />
              .
                          .
              .
                            <asp:ScriptReference Name="WebFormsBundle" />
              <%--Site Scripts--%>
          </Scripts>
      </asp:ScriptManager>

<div class="container" style="border:solid;border-width:thin;padding:0;">
<div class="position-relative">
    <!-- MENU - START -->
    <nav class="navbar navbar-light navbar-expand-sm bg-light position-absolute" style="z-index:100;padding:0!important;line-height:1.0;">

    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#NewNavBar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">    
        <span class="navbar-toggler-icon"></span>
    </button>

      <div class="collapse navbar-collapse" id="NewNavBar" >
        <ul class="navbar-nav mr-auto">
           <li class="nav-item">
                <a class="nav-link MenuFormat" href="default.aspx" role="button" aria-expanded="false" >                    
                    <asp:Label ID="lbl0thMenuTop" runat="server" />
                </a>
            </li> 
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle MenuFormat" href="#" id="nddNew" role="button" data-toggle="dropdown" aria-expanded="false">                    
                    <asp:Label ID="lbl1stMenuTop" runat="server" />
                </a>
                <div class="dropdown-menu" aria-labelledby="nddNew">
                    <a class="dropdown-item li_format" href="New.aspx"><asp:Label ID="lbl1stMenuTopSub1" runat="server" /></a>
                    <a class="dropdown-item li_format" href="Newsletter.aspx"><asp:Label ID="lbl1stMenuTopSub2" runat="server" /></a>
                    <a class="dropdown-item li_format" href="News2.aspx"><asp:Label ID="lbl1stMenuTopSub3" runat="server" /></a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle MenuFormat" href="#" id="nddAbout" role="button" data-toggle="dropdown" aria-expanded="false">                    
                    <asp:Label ID="lbl2ndMenuTop" runat="server" />
                </a>
                <div class="dropdown-menu" aria-labelledby="nddAbout">
                  <a class="dropdown-item li_format" href="Pledge.aspx"><asp:Label ID="lbl2ndMenuTopSub1" runat="server" /></a>
                  <a class="dropdown-item li_format" href="Dir.aspx"><asp:Label ID="lbl2ndMenuTopSub2" runat="server" /></a>
                  <a class="dropdown-item li_format" href="FAQ.aspx"><asp:Label ID="lbl2ndMenuTopSub3" runat="server" /></a>
                </div>
            </li>     
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle MenuFormat" href="#" id="nddOld" role="button" data-toggle="dropdown" aria-expanded="false">                    
                  <asp:Label ID="lbl3rdMenuTop" runat="server" />
                </a>
                <div class="dropdown-menu" aria-labelledby="nddOld">
                  <a class="dropdown-item li_format" href="Old.aspx"><asp:Label ID="lbl3rdMenuTopSub1" runat="server" /></a>
                  <a class="dropdown-item li_format" href="OldMat.aspx"><asp:Label ID="lbl3rdMenuTopSub2" runat="server" /></a>
                  <a class="dropdown-item li_format" href="OldNews.aspx"><asp:Label ID="lbl3rdMenuTopSub3" runat="server" /></a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle MenuFormat" href="#" id="nddMed" role="button" data-toggle="dropdown" aria-expanded="false">                    
                  <asp:Label ID="lbl4thMenuTop" runat="server" />
                </a>
                <div class="dropdown-menu" aria-labelledby="nddMed">
                  <a class="dropdown-item li_format" href="Med.aspx"><asp:Label ID="lbl4thMenuTopSub1" runat="server" /></a>
                  <a class="dropdown-item li_format" href="MedMat.aspx"><asp:Label ID="lbl4thMenuTopSub2" runat="server" /></a>
                  <a class="dropdown-item li_format" href="MedNews.aspx"><asp:Label ID="lbl4thMenuTopSub3" runat="server" /></a>
                </div>
            </li>   

            <li class="nav-item">
                <a class="nav-link ContactMenu" aria-current="page" href="Contact.aspx"> <asp:Label ID="lbl5thMenuTop" runat="server" /></a>
            </li> 
          </ul>
    </div>
  </nav>
      <!-- MENU - END   -->

    <img src="images/Banner.png" class="mx-auto img-fluid" style="height:auto;" />
  </div>     


      <div class="LangDDL">
        <asp:DropDownList ID="ddLang" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddLang_SelectedIndexChanged">       
            <asp:ListItem Value="en-US" Text="English&nbsp;" />
            <asp:ListItem Value="es-ES" Text="Español&nbsp;" />          
        </asp:DropDownList>    
    </div>

        <div>        
          <asp:ContentPlaceHolder ID="MainContent" runat="server">
          </asp:ContentPlaceHolder>
        </div>
      </div>

    </form>
  </body>
</html>

Page 1

<%@ Page Title="Home" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">    
  <br />

  <div class="row">
    <div class="col">
      <img src="images/Homepage_banner_wtext.png" class="mx-auto d-flex img-fluid" />
    </div>
  </div>
  <div class="row">
    <div class="col-lg-4"><img src="images/darkblue/calendar.gif" class="mx-auto d-flex img-fluid" /></div>
    <div class="col-lg-4"><img src="images/darkblue/families.gif" class="mx-auto d-flex img-fluid" /> </div>
    <div class="col-lg-4"><img src="images/darkblue/pubs.gif" class="mx-auto d-flex img-fluid" /> </div>
  </div>
  <div class="row">
    <div class="col-lg-4 text-center"><asp:Label ID="lblHomeImg1Text" runat="server" class="HomeImgText" /></div>
    <div class="col-lg-4 text-center"><asp:Label ID="lblHomeImg2Text" runat="server" class="HomeImgText" /></div>
    <div class="col-lg-4 text-center"><asp:Label ID="lblHomeImg3Text" runat="server" class="HomeImgText" /></div>
  </div>
  <div class="row">
    <div class="col-lg-12"><asp:Label ID="lblHomeText" runat="server" /></div>
  </div>    
</asp:Content>

Page 2

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Temp.aspx.cs" Inherits="Temp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

  <div class="d-flex flex-xl-row flex-column" style="justify-content:space-evenly;">
    <div style="align-self:center;">
      <div class="d-flex flex-xl-row flex-column" style="justify-content:space-evenly;">
        <img src="images/darkblue/materials.gif" class="img-responsive" /><br />
      </div>
      <div class="rounded-pill  round_text">
        <a href="Newsletter.aspx"><asp:Label ID="lblImg1Text" runat="server" class="ImgText" /></a>
      </div>
    </div>
    <div style="align-self:center;">
      <div class="d-flex flex-xl-row flex-column" style="justify-content:space-evenly;">
        <img src="images/darkblue/news.gif" class="img-responsive" /> 
      </div>
      <div class="rounded-pill round_text">
        <a href="News.aspx"><asp:Label ID="lblImg2Text" runat="server" class="ImgText" /></a>
      </div>
    </div>
  </div>    
  <div style="padding:40px;">
    <asp:Label ID="lblText" runat="server" />    
  </div>
</asp:Content>

Please let me know if there is any other information I forgot to mention.

Thank you

DEV Community: jerry898989

Bootstrap master page shifting from page to page