High-Level Bootstrap 4 Container Overview

gistfile1.txt

Bootstrap 4 Default breakpoints (and corresponding fixed-width container sizes):
* xs = 575px and below (100% container, with 15px default left and right paddings)
* sm = 576px – 767px  (540px container, with default paddings)
* md = 768px – 991px (720px container, with default paddings)
* lg = 992px – 1199px (960px container, with default paddings)
* xl = 1200px and up (1140px container, with default paddings)

“Container” dimensions are for when non-fluid containers are used. 
I personally prefer working with non-fluid containers, 
as it leads to massively reduced probability of layout issues. 
When the layout is locked-width per breakpoint, 
we only have to ever think about one content size per breakpoint, 
rather than every possible viewport width in between. 
In this case, the size that matters is the “container” width, 
listed in parentheses above.

If client/design firmly opts to use a fluid-width container, 
design MUST be done at the smallest point of each breakpoint designed. 
By doing this, we can be absolutely sure that all elements in the layout 
will reliably fit and display as intended. 
Along the same consideration, assume that when shrinking the viewport width 
by a single pixel, the layout will shift to the next designed breakpoint down.
(e.g. if we are designing for XS, MD, and LG, design LG at exactly 1200px)