In my Bootstrap 5 setup, I have a variety of pages that have different column layouts - sometimes 2 columns, sometimes 3.
The template system I'm using dynamically adjusts the layout to accommodate the need for a third column when necessary.
<div class="container pt-5">
<div class="row gx-5">
<div class="col-sm-12 order-2 order-md-1 col-md-3">
<!-- Content for the left column goes here -->
</div>
<div class="col-sm order-1 col-md-6">
<!-- Content for the center column goes here -->
</div>
<!-- An if statement to determine layout goes here -->
<div class="col-sm-12 order-3 col-md-3">
<!-- Content for the right column goes here -->
</div>
<!-- End of if statement -->
</div>
</div>
This setup works well for a three column layout, but in cases where the third column is intentionally excluded (resulting in a two column layout), the center column needs to span col-md-9 instead of col-md-6.
While I can manually adjust the template to accommodate this, I prefer to rely on Bootstrap for handling the layout seamlessly.
Initially, I tried using col-md-auto for the center column to dynamically resize, but this caused it to break onto a new line.
I am looking for a way to ensure that col-md-auto spans 9 as needed, or if there's something I might be missing in the implementation.
Your insights and assistance on this matter would be greatly appreciated.
If there are any elements that I may have overlooked, please do point them out.
Based on some feedback I received, I realize there may have been some confusion. With the current Bootstrap classes, at the small breakpoint, the three columns stack with the center on top, followed by the right column, and then the left column at the bottom. For larger breakpoints ('sm' and above), the layout changes to have the left column on the left, center column in the center, and the right column on the right. The only issue arises when there is no left column (which is a valid scenario for the site); in this case, the center column for sizes above 'sm' should expand to occupy the remaining space (either col-9 when there is no right column, or col-6 when there is).