[v4 beta-3] Unexpected display none in d-print-* classes applied to non print media

Created by: jarvelov

Description

The .d-print-* classes unexpectedly added a display: none !important when adding class to an element. As seen in the source of display.scss

In the documentation there is no mention of the print classes having this behaviour, rather to the contrary in the example provided in the docs is the following markup:

<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>

And as seen in the docs, the above div is not visible on large screens, despite what the d-lg-block class would make one assume.

Proposed resolutions

1. Remove the display: none !important style from the d-print-* classes.

2. Include a mention in the documentation that applying a d-print-* class will also hide the element on all except @print media. Also remove the div from above from the docs as it is confusing and infers that the element should be visible on large screens.

I would strongly argue in favor of the first proposed resolution. Since the d-none classes exists it would make sense to add that class to any element which should only be included when printing.

Demo

Fiddle: https://jsfiddle.net/b2zfLvpe/ As seen in the documentation: https://getbootstrap.com/docs/4.0/utilities/display/#display-in-print