Example of the Bootstrap 4.1.0 grid system (container-fluid)

Just change the size of the browser window and the change of the grid will get obvious.

Current Class (Visibility):

xs (extra small) d-inline d-sm-none
sm (small) d-none d-sm-inline d-md-none
md (medium) d-none d-md-inline d-lg-none
lg (large) d-none d-lg-inline d-xl-none
xl (xlarge) d-none d-xl-inline


sm+ (small) d-none d-sm-inline
md+ (medium) d-none d-md-inline
lg+ (large) d-none d-lg-inline
xl+ (xlarge) d-none d-xl-inline


First we use col-6 col-sm-4 col-md-3 col-lg-1 for each cell.'; echo '
'; for ($i=1; $i <= 36;$i++) { echo '
' . $i . ': Just some text.
'; } echo '
'; echo '

Here we use col-12 col-sm-6 col-md-4 col-lg-1 for each cell.

'; echo '
'; for ($i=1; $i <= 36;$i++) { echo '
' . $i . ': Just some text.
'; } echo '
'; ?>


Example of the Bootstrap 4.1.0 grid system (container)

Just change the size of the browser window and the change of the grid will get obvious.

First we use col-6 col-sm-4 col-md-3 col-lg-1 for each cell.'; echo '
'; for ($i=1; $i <= 36;$i++) { echo '
' . $i . ': Just some text.
'; } echo '
'; echo '

Here we use col-12 col-sm-6 col-md-4 col-lg-1 for each cell.

'; echo '
'; for ($i=1; $i <= 36;$i++) { echo '
' . $i . ': Just some text.
'; } echo '
'; ?>