Bootstrap has classes such as col-md and col-md-auto for handling grid systems. However, if you apply, for example, a slider from Swiper.js to an element placed using these classes, the layout may be broken.
This is because the col-md class is set to min-width: auto by default. And min-width: auto has the property of trying to reserve width based on the original content size.
To eliminate this, set min-width: 0;. This will cause the width of the element to fit the parent element regardless of its content, preventing layout collapse problems.
However, the mechanics behind this are somewhat complicated. For more information, see the Stack Overflow question at the following link
https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size