Usa Flex para controlar el diseño de los componentes de Bootstrap 4.
Flexbox
La mayor diferencia entre Bootstrap 3 y Bootstrap 4 es que Bootstrap 4 ahora usa flexbox, en lugar de floats, para manejar el diseño. El módulo de diseño de caja flexible facilita el diseño de una estructura de diseño flexible y receptiva sin utilizar flotador o posicionamiento.
Nota: Flexbox no es compatible con IE9 y versiones anteriores. Si necesitas soporte para IE8-9, usa Bootstrap 3. Es la versión más estable de Bootstrap, y aún es compatible con el equipo para correcciones de errores críticos y cambios de documentación. Sin embargo, no se agregarán nuevas funciones.
Para crear un contenedor flexbox y transformar hijos directos en elementos flex, usa la clase d-flex.
Ejm
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Para crear un contenedor flexbox en línea, usa la clase d-inline-flex.
Ejm
<div class="d-inline-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Dirección horizontal
Usa .flex-row para mostrar los elementos flexibles horizontalmente (uno al lado del otro). Esto es por defecto. Usa .flex-row-reverse para alinear a la derecha la dirección horizontal.
Ejm
<div class="d-flex flex-row bg-secondary">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Dirección vertical
Utiliza .flex-column para mostrar los elementos flexibles verticalmente (uno encima del otro), o .flex-column-reversepara invertir la dirección vertical.
Ejm
<div class="d-flex flex-column">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Contenido justificado
Usa las clases .justify-content- * para cambiar la alineación de los elementos flexibles. Las clases válidas son start(default), end, center, between o around.
Ejm
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
Relleno / anchos iguales
Use .flex-fill en elementos flexibles para forzarlos en anchos iguales.
Ejm
<div class="d-flex">
<div class="p-2 bg-info flex-fill">Flex item 1</div>
<div class="p-2 bg-warning flex-fill">Flex item 2</div>
<div class="p-2 bg-primary flex-fill">Flex item 3</div>
</div>
Grow (Crecer)
Usa .flex-grow-1 en un elemento flexible para ocupar el resto del espacio. En el siguiente ejemplo, los dos primeros elementos flexibles ocupan el espacio necesario, mientras que el último elemento ocupa el resto del espacio disponible.
Ejm
<div class="d-flex">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
</div>
Consejo: Use .flex-shrink-1 en un elemento flexible para que se encoja si es necesario.
Orden
Cambia el orden visual de un elemento (s) flexible específico (s) con las clases .order. Las clases válidas son de 0 a 12, donde el número más bajo tiene la prioridad más alta (el orden-1 se muestra antes del orden-2, etc.).
Ejm
<div class="d-flex bg-secondary">
<div class="p-2 bg-info order-3">Flex item 1</div>
<div class="p-2 bg-warning order-2">Flex item 2</div>
<div class="p-2 bg-primary order-1">Flex item 3</div>
</div>
Auto márgenes
Agregue fácilmente márgenes automáticos a elementos flexibles con .mr-auto (elementos de inserción a la derecha), o utilizando .ml-auto (elementos de inserción a la izquierda):
Ejm
<div class="d-flex bg-secondary">
<div class="p-2 mr-auto bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex bg-secondary">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 ml-auto bg-primary">Flex item 3</div>
</div>
Wrap (Envolver)
Controla como los elementos flexibles se envuelven en un contenedor flexible con .flex-nowrap (predeterminado), .flex-wrap o .flex-wrap-reverse.
Ejm
<div class="container mt-3">
<h2>Wrap</h2>
<p>Control how flex items wrap in a flex container with .flex-nowrap (default), .flex-wrap or .flex-wrap-reverse.</p>
<p><code>.flex-wrap:</code></p>
<div class="d-flex flex-wrap bg-light">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
</div>
<br>
<p><code>.flex-wrap-reverse:</code></p>
<div class="d-flex flex-wrap-reverse bg-light">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
</div>
<br>
<p><code>.flex-nowrap:</code></p>
<div class="d-flex flex-nowrap bg-light">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
<div class="p-2 border">Flex item 26</div>
<div class="p-2 border">Flex item 27</div>
<div class="p-2 border">Flex item 28</div>
<div class="p-2 border">Flex item 29</div>
<div class="p-2 border">Flex item 30</div>
<div class="p-2 border">Flex item 31</div>
<div class="p-2 border">Flex item 32</div>
<div class="p-2 border">Flex item 33</div>
<div class="p-2 border">Flex item 34</div>
<div class="p-2 border">Flex item 35</div>
</div>
<br>
</div>
Alineando contenido
Controla la alineación vertical de los elementos flexibles reunidos con las clases .align-content- *. Las clases válidas son:
- .align-content-start (predeterminado)
- .align-content-end
- .align-content-center
- .align-content-between
- .align-content-around
- .align-content-stretch.
Nota: Estas clases no tienen efecto en filas individuales de elementos flexibles.
Ejm
<div class="d-flex flex-wrap align-content-start">..</div>
<div class="d-flex flex-wrap align-content-end">..</div>
<div class="d-flex flex-wrap align-content-center">..</div>
<div class="d-flex flex-wrap align-content-around">..</div>
<div class="d-flex flex-wrap align-content-stretch">..</div>
Alinear elementos
Controla la alineación vertical de filas individuales de elementos flexibles con las clases .align-items- *. Las clases válidas son:
- .align-items-start
- .align-items-end
- .align-items-center
- .align-items-baseline
- .align-items-stretch (predeterminado).
Ejm
<div class="d-flex align-items-start">..</div>
<div class="d-flex align-items-end">..</div>
<div class="d-flex align-items-center">..</div>
<div class="d-flex align-items-baseline">..</div>
<div class="d-flex align-items-stretch">..</div>
Alinearse
Controla la alineación vertical de un elemento flexible especificado con las clases .align-self- *. Las clases válidas son:
- .align-self-start
- .align-self-end
- .align-self-center
- .align-self-baseline
- .align-self-stretch (valor predeterminado).
Ejm
<div class="d-flex bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border align-self-start">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
Clases Flex Responsive
Todas las clases flexibles vienen con clases responsive adicionales, lo que facilita la configuración de una clase flexible específica en un tamaño de pantalla específico.
El símbolo * se puede reemplazar con sm, md, lg o xl, que representa pantallas pequeñas, medianas, grandes o grandes.
| Clases |
Descripción |
| Flex Container |
|
.d-*-flex |
Crea un contenedor flexbox para diferentes pantallas |
.d-*-inline-flex |
Crea un contenedor flexbox en línea para diferentes pantallas |
| Direction |
|
.flex-*-row |
Mostrar elementos flexibles horizontalmente en diferentes pantallas |
.flex-*-row-reverse |
Muestra elementos flexibles horizontalmente y alineados a la derecha, en diferentes pantallas |
.flex-*-column |
Mostrar elementos flexibles verticalmente en diferentes pantallas |
.flex-*-column-reverse |
Visualizar elementos flexibles verticalmente, con orden inverso, en pantallas de pantallas diferentes |
| Justified Content |
|
.justify-content-*-start |
Mostrar elementos flexibles desde el principio (alineados a la izquierda) en diferentes pantallas |
.justify-content-*-end |
Mostrar elementos flexibles al final (alineados a la derecha) en diferentes pantallas |
.justify-content-*-center |
Mostrar elementos flexibles en el centro de un contenedor flexible en diferentes pantallas |
.justify-content-*-between |
Mostrar elementos flexibles en «entre» en diferentes pantallas |
.justify-content-*-around |
Mostrar elementos flexibles «alrededor» en diferentes pantallas |
| Fill / Equal Width |
|
.flex-*-fill |
Forzar elementos flexibles en anchos iguales en diferentes pantallas |
| Grow |
|
.flex-*-grow-0 |
No hace crecer los artículos en diferentes pantallas |
.flex-*-grow-1 |
Haz que los artículos crezcan en diferentes pantallas |
| Shrink |
|
.flex-*-shrink-0 |
No hace que los artículos se encojan en diferentes pantallas |
.flex-*-shrink-1 |
Hacer que los artículos se reduzcan en diferentes pantallas |
| Order |
.order-*-0-12 |
Cambiar el orden de 0 a 12 en pantallas pequeñas |
| Wrap |
|
.flex-*-nowrap |
No envuelve artículos en diferentes pantallas |
.flex-*-wrap |
Wrap items on different screens |
.flex-*-wrap-reverse |
Invierta la envoltura de elementos en diferentes pantallas |
| Align Content |
|
.align-content-*-start |
Alinea los elementos reunidos desde el principio en diferentes pantallas |
.align-content-*-end |
Alinea los elementos reunidos al final en diferentes pantallas |
.align-content-*-center |
Alinea los elementos reunidos en el centro en diferentes pantallas |
.align-content-*-around |
Alinea los elementos reunidos «alrededor» en diferentes pantallas |
.align-content-*-stretch |
Estirar elementos reunidos en diferentes pantallas |
| Align Items |
|
.align-items-*-start |
Alinea filas individuales de elementos desde el principio en diferentes pantallas |
.align-items-*-end |
Alinea filas individuales de elementos al final en diferentes pantallas |
.align-items-*-center |
Alinea filas individuales de elementos en el centro en diferentes pantallas |
.align-items-*-baseline |
Alinea filas individuales de elementos en la línea base en diferentes pantallas |
.align-items-*-stretch |
Estira filas individuales de elementos en diferentes pantallas |
| Align Self |
|
.align-self-*-start |
Alinea un elemento flexible desde el principio en diferentes pantallas |
.align-self-*-end |
Alinea un elemento flexible al final en diferentes pantallas |
.align-self-*-center |
Alinea un elemento flexible en el centro en diferentes pantallas |
.align-self-*-baseline |
Alinea un elemento flexible en la línea de base de diferentes pantallas |
.align-self-*-stretch |
Estira un elemento flexible en diferentes pantallas |