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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
            content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Responsive Banner</title>
</head>
<body>

    <div class="container-fluid">
        <div class="row d-block d-sm-none">
            <div class="col bg-primary text-white text-center">Extra Small</div>
        </div>
        <div class="row d-none d-sm-block d-md-none">
            <div class="col bg-secondary text-white text-center">Small</div>
        </div>
        <div class="row d-none d-md-block d-lg-none">
            <div class="col bg-success text-white text-center">Medium</div>
        </div>
        <div class="row d-none d-lg-block d-xl-none">
            <div class="col bg-info text-white text-center">Large</div>
        </div>
        <div class="row d-none d-xl-block">
            <div class="col bg-warning text-dark text-center">Extra Large</div>
        </div>
    </div>

</body>
</html>

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.