El d-flex es una clase incorporada en Bootstrap 4 que se puede usar para establecer la altura completa en un div. Lo ilustraremos con el ejemplo de código de trabajo a continuación.
Sintaxis:
<div class="d-flex"> ... <div>
A continuación, el código crea tres divs en una disposición horizontal, pero el problema es que la altura del div interno con la clase box-inner no es la misma en todos los divs y depende del texto en el div. Queremos que la altura sea la misma para todos los divs y que sea igual a la del div con el texto más largo.
- Programa:
<!DOCTYPE html><html><head><linkrel="stylesheet"href=<style>.box-inner {background: rgb(104, 201, 25);margin: 2px;}.container {margin-top: 30px;}</style></head><body><h1>GeeksforGeeks</h1><b>A Computer Science Portal for Geeks</b><divclass="container"><divclass="row"><divclass="col-12 col-lg-3 col-md-6 box"><divclass="box-inner"><pclass="content">This is my first div.</p></div></div><divclass="col-12 col-lg-3 col-md-6 box"><divclass="box-inner"><pclass="content">This is my second div with avery very long text. Text inthis div is longer than bothother divs.</p></div></div><divclass="col-12 col-lg-3 col-md-6 box"><divclass="box-inner"><pclass="content">This is my third div.</p></div></div></div></div></body></html> - Producción:
Solución: Usaremos la clase d-flex para aumentar la altura de todos los divs y junto con eso agregaremos ancho: 100%; de modo que el ancho de todos los divs sea el máximo del área disponible.
- Programa:
<!DOCTYPE html><html><head><linkrel="stylesheet"href=<style>.box-inner {background: rgb(104, 201, 25);margin: 2px;width: 100%;}.container {margin-top: 30px;}</style></head><body><divclass="container"><divclass="row"><divclass="col-12 col-lg-3 col-md-6 box d-flex"><divclass="box-inner"><pclass="content">This is my first div.</p></div></div><divclass="col-12 col-lg-3 col-md-6 box d-flex"><divclass="box-inner"><pclass="content">This is my second div with a veryvery long text. Text in this divis longer than both other divs.</p></div></div><divclass="col-12 col-lg-3 col-md-6 box d-flex"><divclass="box-inner"><pclass="content">This is my third div.</p></div></div></div></div></body></html> - Producción:
