Comment étendre une ligne Bootstrap à 4 lignes pour remplir la hauteur restante ?

Bootstrap 4 - Extension d'une ligne pour remplir la hauteur restante

Dans cet article, nous explorerons comment étendre une ligne pour remplir la hauteur restante en utilisant Bootstrap 4.

Problème :

Vous pouvez rencontrer une situation dans laquelle vous souhaitez qu'une rangée s'étire pour occuper le reste de la hauteur disponible. Malgré les tentatives d'utilisation de la classe h-100, des espaces excessifs apparaissent en bas de l'écran.

Solution : Bootstrap 4.1 flex-grow-1 Class

Bootstrap 4.1 introduit la classe flex-grow-1, qui permet à un élément de se développer pour remplir l'espace restant dans son conteneur parent. En utilisant cette classe, nous pouvons obtenir le résultat souhaité.

Voici l'extrait de code révisé :

<br>html,body{height:100%;}</p> <p>.bg-violet {<br> fond : rgb(48,0,50);<br>}<br>.bg-gris {<br> fond : rgb(74,74,74);<br>}<br>.bg-bleu {<br> fond : rgb(50 101 196);<br>}<br>.bg-red {<br> fond : rgb(196,50,53);<br>} </p>
<p><div> <div class="row justifier-content-center h-100"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>