NAVBARS

Barra 1
Barra 2
Barra 3 (Es la barra offcanvas superior, que está como fixed-top).
Barra 4

OBJETOS OCULTOS

Advertencia: Esta acción es irreversible.

Ir al contenido

CUADRÍCULAS

Una de tres columnas
Una de tres columnas
Una de tres columnas

OPCIONES DE CUADRÍCULA

IGUAL ANCHO

1 de 2
2 de 2
1 de 3
2 de 3
3 de 3

MULTILÍNEA DE IGUAL ANCHO

col
col
espacio
col
col

ANCHO DE COLUMNA

1 de 3
2 de 3 (6 col)
3 de 3
1 de 3
2 de 3 (5 col)
3 de 3

ANCHO VARIABLE

1 of 3 (col col-lg-2)
Variable width content (col-md-auto)
3 of 3 (col col-lg-2)
1 of 3
Variable width content (col-md-auto)
3 of 3 (col col-lg-2)

CLASES RESPONSIVAS

col
col
col
col
col-8
col-4

APILADO HORIZONTAL

col-sm-8
col-sm-4
col-sm
col-sm
col-sm

MEZCLAR Y COMBINAR

.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

PADDINGS

Aquí hay un ejemplo de cómo personalizar la cuadrícula Bootstrap en el lg punto de interrupción. Hemos aumentado el .col acolchado con .px-lg-5, lo hemos contrarrestado con .mx-lg-n5 en el padre .row y luego hemos ajustado el .container con .px-lg-5.

Custom column padding
Custom column padding

ROWS & COLS

class="row row-cols-2"
Column
Column
Column
Column
class="row row-cols-3"
Column
Column
Column
Column
class="row row-cols-4"
Column
Column
Column
Column
class="row row-cols-4" + class="col-6" en la tercer columna
Column
Column
Column
Column
class="row row-cols-1 row-cols-sm-2 row-cols-md-4"
Column
Column
Column
Column
BORDES Y ESTILOS

.col-sm-6 .col-md-8
.col-6 .col-md-4
ENVOLTURA DE COLUMNA

Si se colocan más de 12 columnas en una sola fila, cada grupo de columnas adicionales, como una unidad, se ajustará a una nueva línea.

.col-9
.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6
Subsequent columns continue along the new line.
SALTOS DE COLUMNA

.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3

También podés aplicar esta interrupción en puntos de interrupción específicos con nuestras utilidades de pantalla responsive .

.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
REORDENACIÓN

First in DOM, no order applied
Second in DOM, with a larger order
Third in DOM, with an order of 1

RESPONSIVE

First in DOM, ordered last
Second in DOM, unordered
Third in DOM, ordered first

DESPLAZAMIENTO DE COLUMNAS
CLASES DE COMPENSACIÓN

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3

UTILIDADES DE MARGEN

Con el cambio a flexbox en v4, podés usar utilidades de margen, como .mr-auto y forzar a las columnas hermanas a separarse unas de otras.

.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-md-auto
.col-md-3 .ml-md-auto
.col-auto .mr-auto
.col-auto
ANIDAMIENTO

Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6

Elemento con cambio de cursor

Non-button element button

Otros elementos

Fancy display heading With faded secondary text

Títulos

Display 1

Display 2

Display 3

Display 4

Destacar un párrafo

Párrafo destacado.

Párrafo alineado

Renglón 1