When creating a layout using Bootstrap’s grid system, using the attribute selector [class^=col] may cause styles to be applied to unintended elements.
This is because [class^=col] covers all elements with class names beginning with “col,” and Bootstrap includes “col” not only in classes containing col-*, but also in other classes such as collapse.
To avoid this problem, Bootstrap directly specifies the specific class name, such as col-sm-6, col-sm-7, etc. This allows the style to be applied only to the intended element.