Display
Responsive
Set the display type of an element.
| Class | Result |
|---|---|
| .d-inline | display: inline; |
| .d-inline-block | display: inline-block; |
| .d-block | display: block; |
| .d-table | display: table; |
| .d-none | display: none; |
Looking for flexbox support? Check out stack documentation for flexbox-like support in email using tables.
Responsive
Here is an example of using the display utility to show and hide an element on mobile and hidden on desktop and vice versus.
<span class="d-lg-none">Hidden on Desktop</span>
<span class="d-none d-lg-inline">Hidden on Mobile</span>
Compiled Example
Input
<span class="d-lg-none">Hidden on Desktop</span>
<span class="d-none d-lg-inline">Hidden on Mobile</span>
Output
<!-- The desktop styles are inlined and overridden by a media query in the <head> of the document -->
<span class="d-lg-none" style="display: none;">Hidden on Desktop</span>
<span class="d-none d-lg-inline" style="display: inline;">Hidden on Mobile</span>