Exemplos de cuadrícula de arranque

Disposicións básicas de cuadrícula para familiarizarte coa construción dentro do sistema de grade Bootstrap.

Nestes exemplos a .themed-grid-colclase engádese ás columnas para engadir algunha temática. Esta non é unha clase dispoñible en Bootstrap por defecto.

Cinco niveis de reixa

Hai cinco niveis para o sistema de grella Bootstrap, un para cada gama de dispositivos que admitimos. Cada nivel comeza cun tamaño mínimo de visualización e aplícase automaticamente aos dispositivos máis grandes a non ser que se anule.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

Tres columnas iguais

Obtén tres columnas de igual ancho comezando en escritorios e escalando a escritorios grandes . En dispositivos móbiles, tabletas e abaixo, as columnas apilaranse automaticamente.

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

Tres columnas desiguais

Obtén tres columnas comezando en escritorios e escalando a escritorios grandes de varios anchos. Lembra que as columnas da grella deberían sumar doce para un só bloque horizontal. Ademais, as columnas comezan a apilarse sen importar a ventana gráfica.

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

Dúas columnas

Obtén dúas columnas comezando en escritorios e escalando a escritorios grandes .

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

Ancho total, columna única

Non son necesarias clases de cuadrícula para elementos de ancho completo.


Dúas columnas con dúas columnas aniñadas

Segundo a documentación, a anidación é sinxela: basta con poñer unha fila de columnas dentro dunha columna existente. Isto dálle dúas columnas que comezan en escritorios e escalan a escritorios grandes , con outras dúas (anchuras iguais) dentro da columna máis grande.

En tamaños de dispositivos móbiles, tabletas e inferiores, estas columnas e as súas columnas aniñadas apilaranse.

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

Mixto: móbil e escritorio

O sistema de cuadrícula Bootstrap v4 ten cinco niveis de clases: xs (extra pequeno), sm (pequeno), md (mediano), lg (grande) e xl (extra grande). Podes usar case calquera combinación destas clases para crear deseños máis dinámicos e flexibles.

Cada nivel de clases amplía a escala, é dicir, se planeas establecer os mesmos anchos para xs e sm, só tes que especificar xs.

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

Mixto: móbil, tableta e escritorio

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