Bootstrap container content does not center when window is shrunk - css

Question

I am in the process of developing a BootStrap wrapper for an ASP.NET website that works with almost everything I have used in it -- with the only exception being that content in the main panel does not center itself properly when shrinking the browser window's width, despite the header and footer being completely responsive.
I have a fiddle for this problem: https://dotnetfiddle.net/6dmcaX.
PLEASE NOTE that this wrapper is applied to the master page, and not directly onto the pages that I'm testing with.
For the header, I use a div with the following class attributes: d-flex justify-content-center flex-md-rows align-items-center shadow-sm border-menus fixed-top. Inside that is an UpdatePanel and ContentTemplate, with holds a bunch of markup for the BootStrap navbar.
Meanwhile, here is the markup for the main content panel:
<div class="container d-flex justify-content-center flex-md-rows align-items-center">
// the container acts the same with or without the text to the right of "d-flex"
<div id="content" class="row" style="margin-left: auto; margin-right: auto;">
<div id="divContMain" runat="server" style="width: auto;">
<asp:UpdatePanel ID="contentUPanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<center>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</center>
</ContentTemplate>
</asp:UpdatePanel>
</div>
…
</div>
</div>
The container divContMain needs to run on the server because just below the main content is a sidebar which may or may not be needed, depending on the page being called. By default, the class for divContMain is col-12. One thing I tried doing to fix this problem was I changed the main container to a container-fluid and changed divContMain's width to be inherited instead of "auto" -- and while this did a better job keeping contents in the center, it eventually stops working once the window gets small enough.
I'm very close to figuring this one out, but I wanted to ask and see if anyone else knew. Any help would be appreciated!

Answer 1

It is possible to use combination of the Bootstrap classes to justify content when display: flex is used:
d-flex justify-content-center
So you can add new css class for h1:
#MainContent_ctl00 > h1 {
text-align: center;
}
and add d-flex justify-content-center styles for div which contains your table:
<div class="container d-flex justify-content-center" style="overflow-x: visible;">
<table class="datatable datatable-striped"
id="MainContent_dgReqs" style="border-collapse:collapse;"
border="1" rules="all" cellspacing="0" cellpadding="5">
<!-- The other code is omitted for the brevity -->
</table>
</div>
In addition, text can be aligned through text-align: center inside of <h1>.
An example:
.tableint {
font-size: 15px;
font-family: Estrangelo Edessa, Verdana;
border: Solid 1px #666666;
border-collapse: collapse;
color: Black;
}
.thint {
background-color: #EE8322;
color: Black;
font-weight: bold;
font-size: 14px;
border: solid 1px #666666;
border-collapse: separate;
font-variant: small-caps;
margin-bottom: 5px;
}
.textboxint {
background-repeat: repeat-x;
border: 1px solid #d1c7ac;
font-size: 14px;
border-style: inset;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 5px;
font-family: Estrangelo Edessa, Verdana;
color: Black;
width: 175px;
}
.dropdownint {
background-repeat: repeat-x;
border: 1px solid #d1c7ac;
font-size: 12px;
border-style: inset;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 5px;
font-family: Estrangelo Edessa, Verdana;
color: Black;
width: 175px;
}
.buttonint {
margin: 5px;
font-family: Estrangelo Edessa, Verdana;
font-size: 14px;
background-color: #EE8322;
color: Black;
text-align: center;
border-top-style: groove;
border-left-style: groove;
border-right-color: Black;
border-bottom-color: Black;
height: 22px;
}
.buttonint:hover {
font-family: Estrangelo Edessa, Verdana;
font-size: 14px;
background-color: #FFFFCC;
color: #006699;
margin: 5px;
}
#MainContent_ctl00 > h1 {
text-align: center;
}
<div class="container-fluid my-hs d-flex justify-content-center flex-md-rows align-items-center">
<div class="row justify-content-center" id="content"
style="margin-left: auto; margin-right: auto; padding-top: 1rem;">
<!-- <div id="divContMain" style="width: inherit;">may just remove -->
<div id="contentUPanel">
<div id="MainContent_ctl00">
<br>
<h1>Purchasing Requisitions</h1>
<br>
<div>
<table width="325" align="center" class="tableint" cellspacing="0" cellpadding="5">
<tbody>
<tr>
<td align="center" class="thint" colspan="2">Filter</td>
</tr>
<tr>
<td align="left" style="width: 50%">Request Start:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text">
</td>
</tr>
<tr>
<td align="left" style="width: 50%">Request End:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text">
</td>
</tr>
<tr>
<td align="left" style="width: 50%">Part Number:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text"></td>
</tr>
<tr>
<td align="left" style="width: 50%">Account:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text"></td>
</tr>
<tr>
<td align="left" style="width: 50%">Vendor No:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text"></td>
</tr>
<tr>
<td align="left" style="width: 50%">Vendor Name:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text"></td>
</tr>
<tr>
<td align="center" colspan="2">
<input class="buttonint" type="submit" value="Search">
</td>
</tr>
</tbody>
</table>
</div>
<br>
<div class="container d-flex justify-content-center" style="overflow-x: visible;">
<table class="datatable datatable-striped" id="MainContent_dgReqs" style="border-collapse:collapse;"
border="1" rules="all" cellspacing="0" cellpadding="5">
<tbody>
<tr align="center" class="thint" style="color:Black;background-color:#EE8322;font-weight:bold;">
<td>Row1</td>
<td>Row2</td>
<td>Row3</td>
</tr>
<tr align="center" class="gridview">
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
</tr>
<tr align="center" class="gridview" style="background-color:#FFE1CD;">
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src=" index.js"></script>
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
UPDATE:
I saw you edited your fiddle. So the items are aligned, however we need to align the above div container. So to do this, it is necessary to add the following styles:
<div class="row" id="content mx-auto" style="display:flex; justify-content: center;">
<!-- The other code is omitted for the brevity -->
</div>

Answer 2

With some help from StepUp, I was able to find out what exactly was going wrong. The main container needs its position set to absolute and the content group just below the container needs its content justified to the center, like this:
<div class="container-fluid mt-5" style="position: absolute;">
<div id="content" class="row" style="display: flex; justify-content: center;">
…
</div>
</div>
Now everything scales and is properly centered!