Incorporating Bootstrap4 into my web application, I am faced with the task of displaying a menu exclusively on the large screen size setting (lg).
The guidelines are straightforward: utilize a class to conceal an element across all screen sizes:
.d-none
Furthermore, there exist classes to showcase an element based on a specified screen size (xs, sm, md, lg, and xl):
.d-{sm,md,lg,xl}-block
My approach involves using both these classes if I intend to exhibit an element solely on a large screen:
.d-none .d-lg-block
Initially hiding the element on all sizes and subsequently revealing it on lg. However, according to the documentation, an additional class is required to accomplish this, as stated in the document:
https://i.stack.imgur.com/AM7Gw.png
This requirement seems perplexing. What is the rationale behind introducing the extra .d-xl-none class?