Bootstrap 5 Learning Kit

XSXSSMSMMDMDLGLGXLXLXXLXXL
Extra small: <576pxSmall: ≥576pxMedium: ≥768pxLarge: ≥992pxExtra large: ≥1200pxExtra extra large: ≥1400px
Page Navigation:
NoneInline and blockGridTableFlexResponsive display nonePrint

Display

None

Display none
<div>Display none</div>
<div>Display none</div>

Inline and block

Display inline
Display inline


Display block

Inline-block

Display inline-block

Inline-block

Display inline-block 
<div class="bg-secondary text-white p-2">Display inline</div>
<div class="bg-secondary text-white p-2">Display inline</div>
<br><br>
<span class="bg-secondary text-white p-2">Display block</span>
<br>
<div class="bg-secondary text-white p-2">
  <h4>Inline-block</h4>
  Display inline-block
</div>
<div class="bg-secondary text-white p-2">
  <h4>Inline-block</h4>
  Display inline-block
</div>
<div class="bg-secondary text-white p-2">Display inline</div> <div class="bg-secondary text-white p-2">Display inline</div> <br><br> <span class="bg-secondary text-white p-2">Display block</span> <br> <div class="bg-secondary text-white p-2"> <h4>Inline-block</h4> Display inline-block </div> <div class="bg-secondary text-white p-2"> <h4>Inline-block</h4> Display inline-block </div>

Grid

Display grid
<div>Display grid</div>
<div>Display grid</div>

Table

Display table
Display table-row
Display table-cell
<div>Display table</div>
<div>Display table-row</div>
<div>Display table-cell</div>
<div>Display table</div> <div>Display table-row</div> <div>Display table-cell</div>

Flex

Display flex
Display inline-flex
<div>Display flex</div>
<div>Display inline-flex</div>
<div>Display flex</div> <div>Display inline-flex</div>

Responsive display none

Example: Responsive variations of display none

Display none for breakpoints sm and up
Display none for breakpoints md and up
Display none for breakpoints lg and up
Display none for breakpoints xl and up
Display none for breakpoints xxl and up
<p>Example: Responsive variations of display none</p>
<div>Display none for breakpoints sm and up</div>
<div>Display none for breakpoints md and up</div>
<div>Display none for breakpoints lg and up</div>
<div>Display none for breakpoints xl and up</div>
<div>Display none for breakpoints xxl and up</div>
<p>Example: Responsive variations of display none</p> <div>Display none for breakpoints sm and up</div> <div>Display none for breakpoints md and up</div> <div>Display none for breakpoints lg and up</div> <div>Display none for breakpoints xl and up</div> <div>Display none for breakpoints xxl and up</div>

Print

Display none for print
Display inline for print
Display block for print
Display inline-block for print
Display grid for print
Display table for print
Display table-row for print
Display table-cell for print
Display flex for print
Display inline-flex for print
<div>Display none for print</div>
<div>Display inline for print</div>
<div>Display block for print</div>
<div>Display inline-block for print</div>
<div>Display grid for print</div>
<div>Display table for print</div>
<div>Display table-row for print</div>
<div>Display table-cell for print</div>
<div>Display flex for print</div>
<div>Display inline-flex for print</div>
<div>Display none for print</div> <div>Display inline for print</div> <div>Display block for print</div> <div>Display inline-block for print</div> <div>Display grid for print</div> <div>Display table for print</div> <div>Display table-row for print</div> <div>Display table-cell for print</div> <div>Display flex for print</div> <div>Display inline-flex for print</div>