Grid item 1
Grid item 2
Grid item 3

LAYOUT

GRID

El siguiente ejemplo crea tres columnas de igual ancho en todos los dispositivos y ventanas gráficas utilizando nuestras clases de cuadrícula predefinidas. Esas columnas están centradas en la página con el padre .container.

Column .col
Column .col
Column .col
.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

row row-cols-2

Column .col
Column .col
Column .col
Column .col

row row-cols-3

Column .col
Column .col
Column .col
Column .col

row row-cols-auto

Column .col
Column .col
Column .col
Column .col

Responsive con clases de Bootstrap

row row-cols-1 row-cols-sm-3 row-cols-md-4

Empieza en una columna / en SM se pone en 3 columnas / y en MS se pone en 4 columnas

Column
Column
Column
Column

Experimento 1

Column
Column
Column

GUTTERS

Custom column padding
Custom column padding

Experimento 2

Al .gx-4 se le agrega al lado del .row: Esto permite el espaciado entre los contenidos de las columnas, es decir que debe haber un div dentro de las columnas porque seran esas las que se espaciaran del resto. No se espaciaran las columnas, si no el hijo directo de ellas.

Por ultimo, para que el espaciado con el contenedor sea de acorde con el espaciado entre columnas, debemos poner un padding solo en el eje x .container-fluid .px-4

column
column
column
column