.container VS .container-fluid
container
container-fluid
Autofill space horizontally(.col/.col-{xs,sm,md,lg,xl})
col
col
col
Variable width with fit to content(.col-auto/.col-{xs,sm,md,lg,xl}-auto)
col
col-auto
Fix width (.col-{1...12}/.col-{xs,sm,md,lg,xl}-{1...12})
col-2
col-6
col-4
Fix with with auto (.col-{1...12}-auto/.col-xx-auto)
col-2
col-auto
col-4
Vertical Alignment (align-items-{start,center,end})
col with align-items-start
col with align-items-start
col with align-items-start
col with align-items-center
col with align-items-center
col with align-items-center
col with align-items-end
col with align-items-end
col with align-items-end
Vertical Alignment Special (align-self-{start,center,end})
align-self-start
align-self-center
align-self-end
Horizontal Alignment (justify-content-{start,center,end,around,between})
col-3
col-3
col-3
col-3
col-3
col-3
col-3
col-3
col-3
col-3
No Gutter: allow non-zero row/column margin and padding
col with .no-gutters
col with .no-gutters
col without .no-gutters
col without .no-gutters
Column Wrapping
.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.
ClearFix(Seems like it has no effect in bootstrap4)
very looooooooong paragraph with clearfix
2
3
4
very looooooooong paragraph without clearfix
2
3
4
Reordering(flex-{first/last/unordered}
1. flex-unordered
2. flex-last
3. flex-first
Offset: Move column to the right by increasing margin(offset-xx-{1-12})
.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6.col-md-5.col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
Push/Pull: Move column to the right/left. Push is similar to Offset({push,pull}-xx-{1,12})
1. col-9 with push 3
2. col-3 with pull 9
Nesting: put row-col structure inside col node
parent col-9
col-4
col-6
col-3