I have a container with one row and two columns, and I want to style the left column to resemble a sidebar: full height and extending all the way to the left. I tried using flex classes but encountered a few issues:
- The columns don't extend all the way down
- The text "spreads" out instead of staying centered 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>
...
</div>
<div class="col-sm-8">
...
</div>
</div>
</div>This is what it looks like: https://i.sstatic.net/h4o1V.png
This is the HTML where I attempted 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">
...
</div>
<div class="col-sm-8">
...
</div>
</div>
</form>
</div>This is what it looks like: https://i.sstatic.net/R9Kej.png
How can I achieve a full-height column while keeping the text alignment consistent with the original design?