Tres columnas iguales

Obtenga tres columnas de igual ancho comenzando en los escritorios y escalando a escritorios grandes . En dispositivos móviles, tabletas e inferiores, las columnas se apilarán automáticamente.

.col-md-4
.col-md-4
.col-md-4

Tres columnas desiguales

Obtenga tres columnas comenzando en los escritorios y escalando a escritorios grandes de varios anchos. Recuerde, las columnas de la cuadrícula deben sumar doce para un solo bloque horizontal. Más que eso, y las columnas comienzan a apilarse sin importar la ventana gráfica.

.col-md-3
.col-md-6
.col-md-3

Dos columnas

Obtenga dos columnas comenzando en los escritorios y escalando a escritorios grandes .

.col-md-8
.col-md-4

Ancho completo, columna única

No se necesitan clases de cuadrícula para elementos de ancho completo.


Dos columnas con dos columnas anidadas

Según la documentación, anidar es fácil: simplemente coloque una fila de columnas dentro de una columna existente. Esto le brinda dos columnas que comienzan en los escritorios y se escalan a escritorios grandes , con otras dos (anchos iguales) dentro de la columna más grande.

En tamaños de dispositivos móviles, tabletas y menos, estas columnas y sus columnas anidadas se apilarán.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Mixto: móvil y escritorio

El sistema de cuadrícula Bootstrap 3 tiene cuatro niveles de clases: xs (teléfonos), sm (tabletas), md (equipos de escritorio) y lg (equipos de escritorio más grandes). Puede usar casi cualquier combinación de estas clases para crear diseños más dinámicos y flexibles.

Cada nivel de clases se amplía, lo que significa que si planea establecer los mismos anchos para xs y sm, solo necesita especificar xs.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Mixto: móvil, tableta y escritorio

.col-xs-12 .col-sm-6 .col-lg-8
.col-sm-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

limpieza de columnas

Limpie los flotadores en puntos de interrupción específicos para evitar envoltorios incómodos con contenido desigual.

.col-xs-6 .col-sm-3
Cambie el tamaño de su ventana gráfica o revísela en su teléfono para ver un ejemplo.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Restablecimientos de desplazamiento, empujar y tirar

Restablezca las compensaciones, los empujones y los tirones en puntos de interrupción específicos.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-desplazamiento-2 .col-md-6 .col-md-desplazamiento-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-desplazamiento-2 .col-lg-6 .col-lg-desplazamiento-0