Bootstrap - Stop container from resizing (ie shrinking) when resizing browser - html

Question

I have a bootstrap container in which I have 1 row with 6 columns, like so:
<div class="container-fluid m-0 p-0 bg-primary">
<div class="row">
<div class="card col-2">
</div>
<div class="card col-2">
</div>
<div class="card col-2">
</div>
<div class="card col-2">
</div>
<div class="card col-2">
</div>
<div class="card col-2">
</div>
</div>
</div>
In each column I am adding some additional cards with text content in them. When the browser is fully expanded, the text looks nicely.
However, when I shrink the browser to half size, the entire container shrinks... so the 6 columns are now tiny and unreadable. Not only that, my inner components end up growing vertical scrollbars which makes it look horrible.
Is there a way to keep the container from shrinking when you shrink the window? I want the size to be fixed.
This means that it is possible that there will be a horizontal scrollbar since the container won't fit on the browser screen if it is shrunk.
Thank you. I found an answer from 2012-2013 about shrinking but I want something more updated.

Answer 1

I found the solution myself (based on my device). I didn't find how to programmatically find my device screen width, but in either case, absolute positioning with pixels seems to be the way to go.
<div class="container-fluid m-0 p-0 bg-primary" style="position: absolute; width: 1518px;">
<div class="row">
<div class="card col-2" style="position: absolute; width: 253.0px; left: 0.0px;">
<div class="card col-2" style="position: absolute; width: 253.0px; left: 253.0px;">
<div class="card col-2" style="position: absolute; width: 253.0px; left: 506.0px;">
<div class="card col-2" style="position: absolute; width: 253.0px; left: 759.0px;">
<div class="card col-2" style="position: absolute; width: 253.0px; left: 1112.0px;">
<div class="card col-2" style="position: absolute; width: 253.0px; left: 1265.0px;">
</div>
</div>