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

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.

htmltwitter-bootstrapresizescrollbar


Solution 1:[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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ThePrince

Related Questions