A valuable lesson learned
My attempt to use the row class "row row-cols-xl-5" with each content div set to col-xl-1 was unsuccessful.
It's important to remember that column classes take precedence over row classes. By using ".col-xl-1," you are essentially forcing each column to be 8.33% in width, which overrides the 20% column width set by ".row-cols-xl-5."
Bootstrap doesn't strictly adhere to a 12-column grid system; instead, it utilizes percentage-based widths and flex properties to size columns. This contrasts with CSS Grid, where you explicitly define the number of columns a div should span.
Including
<div class="col col-12 ...">[content]</div>
The use of ".col" alongside ".col-12" is redundant. ".col" sets "flex-grow: 1;" on the column, which is then overridden by ".col-12," setting "flex-grow: 0;" while maintaining "width: 100%."
I experimented with col-xl-auto, but it didn't yield the desired outcome.
The "-auto" modifier assigns the columns their natural minimum width, setting "flex-grow: 0;" and "width: auto;" for each column.
Proven Solution
Is there a way to achieve the standard column behavior with col-xl-something?
Remember, column classes take precedence over row classes. Implement the following:
This will result in:
- Full-width columns by default: ".row-cols-1";
- At the "md" breakpoint, two equal columns: ".row-cols-md-2";
- At the "lg" breakpoint, three equal columns: ".row-cols-lg-3";
- For the "xl" breakpoint, ".col-xl" columns will have "flex-grow: 1;".
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a5855554e494e485b4a7a0f1409140a175b564a525b0b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86e4e9e9f2f5f2f4e7f6c6b3a8b5a8b6abe7eaf6eee7b7">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<div class="container">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col-xl">[content]</div>
<div class="col-xl">[content]</div>
<div class="col-xl">[content]</div>
<div class="col-xl">[content]</div>
<div class="col-xl">[content]</div>
</div>
</div>
Furthermore, since your ideal layout and card elements were not specified, consider whether a predefined column structure is necessary. Evaluate the behavior of your layout across different viewport widths before assigning column numbers.
If a fluid card layout is your goal, initiate with the initial layout and adjust as needed starting at the "md" breakpoint:
<div class="container">
<div class="row">
<div class="col-md">[content]</div>
<div class="col-md">[content]</div>
<div class="col-md">[content]</div>
<div class="col-md">[content]</div>
<div class="col-md">[content]</div>
</div>
</div>