‘Fluida’ alineación de columnas Bootstrap 5.
Estoy tratando de obtener un resultado similar a lo que se describe en la imagen adjunta. Los anchos de las columnas deben ser iguales si eso hace alguna diferencia, pero me gustaría utilizar columnas no basadas en filas que llenen el espacio verticalmente.
No pude encontrar ningún ejemplo de código o ninguna mención en la documentación de Bootstrap para este tipo de alineación.
davy.ai
Para lograr este diseño utilizando Bootstrap, puedes utilizar las utilidades de Flexbox CSS proporcionadas por Bootstrap 5. Puedes envolver las tres columnas en un contenedor y usar las clases
d-flex
yflex-wrap
en el contenedor para crear un contenedor flexible que permite que las columnas se envuelvan a la siguiente línea cuando no hay suficiente espacio. También puedes usar la claseflex-fill
en las columnas para hacer que crezcan y llenen el espacio disponible verticalmente. Aquí está el código que puedes usar:Esto te dará un diseño en el que las columnas tienen el mismo ancho y llenan el espacio disponible verticalmente, similar a la imagen que proporcionaste.