Display

The collection of .d-x classes is used to responsivelychange the display value for an element. This can be used stand-alone or with breakpoints .d-{breakpoint}-x, where x can be as follows:

For instance, in the first example, the three elements are defined with .d-inline as opposed to the second example where the elements are defined with .d-block

    <div class="p-3">
        <div class="row">
            <div class="d-inline">.d-inline</div>
            <div class="d-inline">.d-inline</div>
        </div>
    </div>

<div class="p-3">
    <div class="row">
        <div class="d-block">.d-block</div>
        <div class="d-block">.d-block</div>
    </div>
</div>

The .d-{breakpoint}-* classes can be used to selectively display certain elements on certain devices or viewport widths. Avoid creading individual layouts for mobile and desktop and just diplay what you need.

For instance, in the below example, two containers will be displayed on extra small, small and medium screens, while there'll be three containers on large(r) screens.

        <div class="p-3">
            <div class="row">
                <div class="d-block">.d-block</div>
                <div class="d-none d-lg-block">.d-none .d-lg-block</div>
                <div class="d-block">.d-block</div>
            </div>
        </div>
    
    

There are the two classes .d-dark and .d-light that are used to toggle the visibility of an element based on the user's system theme.

        <div class="p-3">
            <div class="d-block">
                <div class="d-dark">This is a dark content.</div>
                <div class="d-light">This is a light content.</div>
            </div>
        </div>
    
    

This functionality has been marked as deprecated starting from Haze 1.0.1 and is slated for removal in Haze 1.1.0 due to its infrequent usage.

The .d-print-* classes can be used to selectively display certain elements when printing a document or a page.

For instance, in the below example, two containers will be displayed on extra small, small and medium screens, while there'll be three containers on large(r) screens.

            <div class="p-3">
                <div class="row">
                    <div class="d-print-none">
                        Screen Only (Hide on print only)
                    </div>
                    <div class="d-none d-print-block">
                        Print Only (Hide on screen only)
                    </div>
                    <div class="d-none d-lg-block d-print-block">
                        Hide up to large on screen, but always show on print
                    </div>
                </div>
            </div>