Have you noticed the strip of color underneath the nav bar? It's in all of our apps (so far).
Why?
It's demonstating the CSS power of 'media queries' to change the nav bar bottom-border color as the browser window changes size. The 'breakpoints' where it changes color have been selected to coincide with those that Bootstrap5 uses in generating images that respond to size classifications.
Resize the browser window and marvel as the grid below changes size. You will be able to see the browser window size and also the breakpoints.
To learn more about Bootstrap5, check out the Bootstrap5 Crash Course in our movie clips area.
Browser Window Size:
###
Bootstrap 5 Classification:
c-1
c-1
c-1
c-1
c-1
c-1
c-1
c-1
c-1
c-1
c-1
c-1
col-3
col-3
col-3
col-3
sm-4
sm-4
sm-4
1 of 4 md
2 of 4 md
3 of 4 md
4 of 4 md
sm-3 md-4
sm-3 md-4
sm-3 md-4
sm-3 md-4 xl-4
sm-3 md-4 xl-5
sm-6 md-4 xl-3
col-3 col-lg-5
col-auto
col
col-2
col-3 offset-5
col-2