It seems like you are experiencing issues with collapsible columns on your website.
If your columns are not collapsing at specific screen widths, there could be a few reasons for this:
- Your Bootstrap framework may not be linked properly. Make sure to use the correct version of Bootstrap (e.g., 4.1.3 minified).
- You might be using an outdated version of Bootstrap that is not compatible with your current code.
- Ensure that your columns are wrapped in a
<div class="row"> element.
- Don't forget to specify the collapse state of the column using classes like col-sm, col-md, col-lg, or col-xl.
In Bootstrap, columns should stack automatically at 768px width when using the col-md class. The behavior changes for each collapsible state.
For more information on Bootstraps' grid system, visit this link.
Here is a code snippet for reference:
.container .row .col-md-4 {
border: 1px solid red;
}
<!-- BOOTSTRAP CDN LINK -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row">
<!-- Make col-4, col-[sm/md/lg/xl]-4 for different screen widths -->
<div class="col-md-4"><p>Column 1<p></div>
<div class="col-md-4"><p>Column 2<p></div>
<div class="col-md-4"><p>Column 3<p></div>
</div>
</div>
*PLEASE NOTE:
To test this code snippet, expand it to full-screen and adjust the width of the window until the columns start to collapse.