Perhaps the title of this question may not make any sense at first glance. Here are the details of my query:
As far as I know, in Twitter Bootstrap, the -sm- denotes the breakpoint between min-width: 576px and max-width: 767.98px. For example,
@media (min-width: 576px) {
/* ... */
.navbar-expand-sm>.container,
.navbar-expand-sm>.container-fluid,
.navbar-expand-sm>.container-sm,
.navbar-expand-sm>.container-md,
.navbar-expand-sm>.container-lg,
.navbar-expand-sm>.container-xl {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
}However, I have come across some codes in Twitter Bootstrap's bootstrap.css file that look like this:
@media (max-width: 575.98px) {
.navbar-expand-sm>.container,
.navbar-expand-sm>.container-fluid,
.navbar-expand-sm>.container-sm,
.navbar-expand-sm>.container-md,
.navbar-expand-sm>.container-lg,
.navbar-expand-sm>.container-xl {
padding-right: 0;
padding-left: 0;
}
}It appears that we are using .navbar-expand-sm for devices with viewport sizes smaller than the minimum width required for the sm breakpoint. (This applies not only to the sm case)
I am confused by this concept. Could you provide some insight into this? What exactly is the definition of the sm area in Twitter Bootstrap?