When it comes to adjusting the behavior of Bootstrap's col-sm
classes for smaller viewports, specifically below 768px, you can customize them to mimic the behavior of col-xs
. To do this effectively, it is important to have a parent class in your project that can be used as a selector without conflicting with Bootstrap's default styles.
For instance, if your body tag has a class like "page
", you can utilize @media
queries to replicate what the col-xs classes do for viewports under 767px:
@media (max-width: 767px) {
.page .col-sm-3 {
width: 25%;
}
.page .col-sm-6 {
width: 50%;
}
.page .col-sm-9 {
width: 75%;
}
}
You can also employ wildcards similar to how Bootstrap does it:
@media (max-width: 767px) {
.page div[class^="col-sm-"] {
float: left;
}
}
Additionally, make sure that your custom CSS file is included after the Bootstrap file to avoid any conflicts.