Why is Bootstrap 4 column not taking its full available width? - html

Question

I have the following page structure:
<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>
What I am expecting is a column layout from the 'md' breakpoint up, and a stacked layout below that, and this is indeed what I'm getting. But the second 'col' is never extending to the right edge of the parent 'row' container and I do not understand why as all of the examples in the Bootstrap documentation show exactly that this should happen.
So my icon column is nicely set to 1/4 row width on a desktop and full width on mobile. But the column with heading and text is only ever as wide as its content, no matter what size the display. Of course, this makes the heading centring pointless.
What am I missing?

Answer 1

The source formatter on this website failed to catch this little gem, and my source editor has a very subtle colour difference that I hadn't noticed:
<div class-"col-12 col-md-9">
Which should, of course, be
<div class="col-12 col-md-9">
Time to change my editor colour scheme.
And, in fact, that line doesn't need the col-12 class in case anyone is looking. I only put it there in desperation.