My webpage is structured as follows:
<div class="container">
<div class="row mb-5">
<div class="col-12 col-md-3">
<img class="mr-5 img-fluid" src="big_icon_1.png" alt="Big icon 1">
</div>
<div class-"col-12 col-md-9">
<h3 class="mt-0 mb-1 text-center text-md-left">Item 1</h3>
<p>This is item 1.</p>
</div>
</div>
<div class="row mb-5">
<div class="col-12 col-md-3">
<img class="mr-5 img-fluid" src="big_icon_2.png" alt="Big icon 2">
</div>
<div class-"col-12 col-md-9">
<h3 class="mt-0 mb-1 text-center text-md-left">Item 2</h3>
<p>This is item 2.</p>
</div>
</div>
</div>
I have set up my layout to display a column structure from the 'md' breakpoint onwards, and a stacked layout below that. However, I am facing an issue where the second column does not extend to the right edge of the parent 'row' container. This behavior is contrary to what I expected based on Bootstrap documentation examples.
The image column displays correctly with a width of 1/4 row on desktop and full width on mobile. But the column containing the heading and text only stretches to fit its content, regardless of screen size. This results in the centering of the heading being ineffective.
I am puzzled by this unexpected behavior. Can anyone help me understand what I am missing?