When I utilize Bootstrap 5, I am encountering an issue where equal width columns are being displayed one underneath the other. To illustrate, here is a simple example directly from the Bootstrap website:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03616c6c77707771627343362d322d30">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>Although I have successfully loaded Bootstrap (bootstrap.min.css) in the header and can apply all bootstrap classes without issues, the columns are not aligning next to each other as expected.
It works fine when I explicitly specify column widths like col-xs-4 on each of them:
<div class="container">
<div class="row">
<div class="col-xs-4">
Column
</div>
<div class="col-xs-4">
Column
</div>
<div class="col-xs-4">
Column
</div>
</div>
</div>
However, according to the Bootstrap website, it should be possible to create columns that automatically fill the row with the same width by simply using col or col-(breakpoint). Unfortunately, this approach does not seem to work in my case. Here is how the above examples appear:
First example: https://i.stack.imgur.com/vYyCM.png
Second example: https://i.stack.imgur.com/BH9sM.png
Note: Even utilizing col-(n) without specifying a breakpoint (e.g., col-4 in this scenario) does not produce the desired outcome, despite it theoretically should.