Bootstrap 4 : Each row fill the same amount of height - css

Question

I'm making a preloader and i'm struggling with the rows. I want my grey rectangle to be filled with 3 rows of 33% height.
Then I need:
in the row 1, a svg logo
in the row 2, a loader
in the row 3, some text
Here's what I want:
Here's my code :
#loader-modal {
width: 100vw;
height: 100vh;
position: fixed;
background-color: rgba(0,0,0, 0.9);
z-index: 100000;
}
.rectangle-chargement {
width: 25%;
height: 50%;
top: 25%;
left: 37.5%;
position: absolute;
background-color: #E2E2E2;
border-radius: 0.15rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<div id="loader-modal">
<div class="d-flex justify-content-center mx-auto rectangle-chargement">
<div class="container">
<div class="row">
<div class="col-12">
<!--<svg width="100%" >My SVG</svg>-->
</div>
</div>
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-center" id="loader-circulaire">
<div id="chargement-loader"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<p class="d-flex justify-content-center mx-auto patienter-chargement">Veuillez patienter ...</p>
</div>
</div>
</div>
</div>
</div>
Do you guys know a cleaner way to do it ? (and a working one of course)

Answer 1

You can certainly hard code the heights, but since you ask if there is any cleaner way to do it, my opinion is to use flexbox with column flow direction, and let flexbox children grow by setting their flex-grow to 1.
This way doesn't require you to hard code the height for each row, and allows you to have as many rows as you "want".
<div class="rectangle-chargement d-flex flex-column">
<div class="rectangle-chargement-row flex-grow-1">
Logo
</div>
<div class="rectangle-chargement-row flex-grow-1">
Loader
</div>
<div class="rectangle-chargement-row flex-grow-1">
Some text
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/sngkbLcq/32/
If you want to "centralize" the content in each row, you can mark each row as flexbox as well, and set its justify-content and align-items to center.
<div class="rectangle-chargement d-flex flex-column">
<div class="rectangle-chargement-row flex-grow-1
d-flex justify-content-center align-items-center">
Logo
</div>
<div class="rectangle-chargement-row flex-grow-1
d-flex justify-content-center align-items-center">
Loader
</div>
<div class="rectangle-chargement-row flex-grow-1
d-flex justify-content-center align-items-center">
Some text
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/sngkbLcq/36/