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,

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33   Responsive Banner
Extra Small


In the first iteration of this, I used container instead of container-fluid, but it feels better when the banner is end-to-end, so the latter was selected.