When designing websites using Bootstrap 4, I found it challenging to figure out which widths corresponded to which breakpoint. This post describes the HTML layout I came up with to display a small banner (during development) to help me visualize the different breakpoints. Bootstrap 4 comes with many sets of breakpoints for different screen widths and devices - xs, sm, md, lg and xl. These affect the column widths in the grid system. Bootstrap 4 grids need to be wrapped around a ``container`` element. The ``container`` can have ``row`` elements, which in turn will have ``col`` elements. The columns can have different widths depending on the specified breakpoint. I wanted a way to display a banner indicating which breakpoint was currently active. This meant creating a single ``container`` with 5 different ``row`` div's. Each div would have some text (and styling) indicating a different breakpoint. However, it would not be useful to display all of them at the same time. According to the Bootstrap 4 documentation, the way to hide elements is to use the ``display`` classes. This took me a bit of time to wrap my head around, but once I figured out that they work identical to how columns are setup - it immediately clicked in my head! Here is the resulting code I created, ```html