Wie kann ich Hintergrundfarbe einstellen? Bootstrap

Question

Ich ging durch ein Bootstrap-Tutorial, als ich mich selbst mit einem Problem konfrontiert. Es kann albern sein, aber ich kann es nicht ausarbeiten. Ich habe einen Artikel und eine Seitenleiste in einer Reihe mit jeweils 9 und 3 Spalten. Die Hintergrundfarbe des Artikels (blau) endet direkt unter dem Text und ich möchte, dass er der Höhe der Seitenleiste entspricht. In dem Tutorial passiert das nicht, aber irgendwann erklärt er warum. Ich wäre froh, wenn du mir helfen könntest.

<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> 

All dieser Code befindet sich in einer Containerklasse. Meine Klassen .color1 und .color2 definieren nur die Hintergrundfarbe.

Anbei ein Bild, um meine Idee zu verstehen. Image with indication

Answer 1

Sie unter Stil hinzufügen:

.row-eq-height { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
} 

und fügen row-eq-height zu Ihrem Profilelement <section class="main row row-eq-height">