I’m new to Bootstrap and trying to use All Bootstrap Blocks in a new block based theme. Having created the basic layout for large devices I tried to add the relevant classes so that the columns which were side by side on a laptop or larger would wrap for smaller devices.
I therefore changed the CSS classes from col-4 and col-7 to col-md-4 and col-md-7.
This solution worked for my programmatically generated bootstrap carousel but didn’t work where I’d used the areoi/column block.
I discovered that the block generates the first opening div with the following classes.
<div class="block-0b5d855d-11e3-4469-860c-f90bd942d127 col areoi-element col-md-4 d-flex flex-column gx-0">
The extra col classname is added by the block. When I remove the col the responsive logic takes effect.
Is this something I’m doing wrong? Or is this a change in Bootstrap 5.3 that’s causing the CSS for .colto override the CSS for .col-sm-4
As a temporary workaround I’ve changed the PHP in areoi_render_block_column()to prevent the col classname from being added.