Layout

In the MIZ framework, the Display section allows you to control how elements are displayed. With a variety of customizable classes, you can easily manage the display of elements, including hiding, showing, and setting the display type (block, inline, flex, grid).

Basic Display Classes #

In MIZ, the basic classes for setting the display type of elements are as follows:

• d-none: display: none;

• d-block: display: block;

• d-inline: display: inline;

• d-inline-block: display: inline-block;

• d-flex: display: flex;

• d-grid: display: grid;

Custom Settings #

To customize display classes,

You can refer to the file miz/sass/config/_responsive.scss in the $conf-display variable. If its value is false, responsive mode is disabled, and if it is true, responsive mode is enabled.

                    

                    
HTML

                    <div class="w-100 d-flex justify-content-center align-items-center">
    <div class="d-inline p-2 border-box text-color bg-primary-color">d-inline</div>
    <div class="d-inline p-2 border-box text-color bg-on-primary-color">d-inline</div>
</div>
                

                    

                    
HTML

                    <div class="w-100 d-flex justify-content-center align-items-center">
    <div class="d-block p-2 border-box text-color bg-primary-color">d-block</div>
    <div class="d-block p-2 border-box text-color bg-on-primary-color">d-block</div>
</div>