Formatting columns with Bootstrap - css

Question

I have a container containing a single row with two columns and am trying to format the left column so that it looks similar to a sidebar: full height and extending all the way to the left.
I used flex classes for this but ran into a couple problems:
the columns doesn't extend all the way down
the text "spreads" out instead of staying aligned in the center like before
Code without full height column:
<div class="container">
<form enctype=multipart/form-data action={{url_for('upload_file')}} method="POST" enctype="multipart/form-data"></form>
<div class="row">
<div class="col-sm-4 bg-light">
<br>
<br>
<h4>Select a model:</h4>
<input type="radio" id="logreg" name="model" value="logreg" required>
<label for="male">Logistic regression</label><br>
<input type="radio" id="knn" name="model" value="knn">
<label for="male">K-nearest neighbors</label><br>
<input type="radio" id="randomforest" name="model" value="randomforest">
<label for="male">Random forest</label><br>
<input type="radio" id="svm" name="model" value="svm">
<label for="male">Kernel SVM</label><br>
<br>
<h4>Visuals</h4>
<input type="checkbox" id="mel" name="mel" value="mel">
<label for="mel"> Show Mel-Spectrogram</label><br>
<input type="checkbox" id="chroma" name="chroma" value="chroma">
<label for="chroma"> Show Chroma Spectrogram</label><br>
<input type="checkbox" id="tempo" name="tempo" value="tempo">
<label for="tempo"> Show Tempogram</label><br>
<br>
<p>See the project on GitLab</p>
</div>
<div class="col-sm-8">
<br>
<br>
<h3>Music Genre Recognition</h3>
<p>We created an algorithm that can recognize the musical genre of an audio file.<br>
To try it, upload a file and choose a model, then click submit.</p>
<p>It can take up to a few minutes so be patient !</p>
<h3>Choose a file:</h3>
<br>
<input type="file" name="file" accept=".wav, .mp3" class="form-control" id="customFile" required/><br>
<button type="submit" class="btn btn-outline-secondary">Submit</button>
</div>
</div>
</form>
</div>
And this is the result:
This is the html where I tried to make the left column full height:
<div class="container-fluid d-flex h-100">
<form enctype=multipart/form-data action={{url_for('upload_file')}} method="POST" enctype="multipart/form-data"></form>
<div class="row flex-fill">
<div class="col-sm-4 bg-light d-flex flex-column flex-fill">
<br>
<br>
<h4>Select a model:</h4>
<input type="radio" id="logreg" name="model" value="logreg" required>
<label for="male">Logistic regression</label><br>
<input type="radio" id="knn" name="model" value="knn">
<label for="male">K-nearest neighbors</label><br>
<input type="radio" id="randomforest" name="model" value="randomforest">
<label for="male">Random forest</label><br>
<input type="radio" id="svm" name="model" value="svm">
<label for="male">Kernel SVM</label><br>
<br>
<br>
<h4>Visuals</h4>
<input type="checkbox" id="mel" name="mel" value="mel">
<label for="mel"> Show Mel-Spectrogram</label><br>
<input type="checkbox" id="chroma" name="chroma" value="chroma">
<label for="chroma"> Show Chroma Spectrogram</label><br>
<input type="checkbox" id="tempo" name="tempo" value="tempo">
<label for="tempo"> Show Tempogram</label><br>
<br>
<br>
<br>
<p>See the project on GitLab</p>
</div>
<div class="col-sm-8">
<br>
<br>
<h3>Music Genre Recognition</h3>
<p>We created an algorithm that can recognize the musical genre of an audio file.<br>
To try it, upload a file and choose a model, then click submit.</p>
<p>It can take up to a few minutes so be patient !</p>
<h3>Choose a file:</h3>
<br>
<input type="file" name="file" accept=".wav, .mp3" class="form-control" id="customFile" required/><br>
<button type="submit" class="btn btn-outline-secondary">Submit</button>
</div>
</div>
</form>
</div>
And this is the result:
How can I make this column full height and keep the text like in the first example ?

Answer 1

Bootstrap has some height utility classes that can stretch the height to be the same as the view port (.min-vh-100). If you apply this to the div with the .row class, flex should take care of stretching the columns to fill the space.
<div class="row min-vh-100">
...
</div>