Confusing description of spacing utilities notation #39643
-
Hi everyont, I'm new to front end developing and Bootstrap. I'm a bit confused about some descriptions in the Notation documentation of spacing uilities. I'm using the link here (https://getbootstrap.com/docs/5.3/utilities/spacing/). It says "Spacing utilities that apply to all breakpoints, from xs to xxl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation." Could anyone please give me some guidance on what does "the remaining breakpoints" mean? And in the next paragraph, it says "The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl." . Should I understand the classes using different formats for xs and (sm, md, lg, xl, and xxl) are "the remaining breakpoints"? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
Hey @Stella521
The "remaining breakpoints" are all breakpoints except For example:
|
Beta Was this translation helpful? Give feedback.
Hey @Stella521
The "remaining breakpoints" are all breakpoints except
xs
, sosm
,md
,lg
,xl
andxxl
.For example:
mt-0
(that corresponds toxs
) has no abbreviation and is defined without any CSS mediamt-sm-0
is defined fromsm
with the following CSS media:@media (min-width: 576px)
mt-md-0
is defined frommd
with the following CSS media:@media (min-width: 768px)
mt-lg-0
is defined fromlg
with the following CSS media:@media (min-width: 992px)
mt-xl-0
is defined fromxl
with the following CSS media:@media (min-width: 1200px)
mt-xl-0
is defined fromxl
with th…