While following a Bootstrap tutorial, I stumbled upon an issue that I can't seem to resolve. In my layout, I have an article and a sidebar in a row, with the article taking up 9 columns and the sidebar taking up 3 columns. The background color of the article (blue) only extends to the end of the text, but I want it to match the height of the sidebar. The tutorial does not address this discrepancy, so I would appreciate any help you could provide.
<section class="main row">
<article class="color1 col-xs-12 col-sm-8 col-md-9">
<h3>Article</h3>
<p>
Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the .sr-only class. If you must do without labels, adjust the top value of the feedback icon. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon.
</p>
</article>
<aside class="color2 col-xs-12 col-sm-4 col-md-3">
<h3>Sidebar</h3>
<p>
Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the .sr-only class. If you must do without labels, adjust the top value of the feedback icon. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon.
</p>
</aside>
</section>
The entire code snippet is contained within a container class. My .color1 and .color2 classes simply specify the background-color properties.
I have included an image link to better illustrate my concept: Image with indication