Bootstrap Email Templates are officially here! Get Templates Now<

Display

Responsive
Set the display type of an element.

Class Result
.d-inlinedisplay: inline;
.d-inline-blockdisplay: inline-block;
.d-blockdisplay: block;
.d-tabledisplay: table;
.d-nonedisplay: 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>