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 class="d-none">Display none</div>
<div class="d-none">Display none</div>

Inline and block

Display inline
Display inline


Display block

Inline-block

Display inline-block

Inline-block

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

Grid

Display grid
<div class="d-grid">Display grid</div>
<div class="d-grid">Display grid</div>

Table

Display table
Display table-row
Display table-cell
<div class="d-table">Display table</div>
<div class="d-table-row">Display table-row</div>
<div class="d-table-cell">Display table-cell</div>
<div class="d-table">Display table</div> <div class="d-table-row">Display table-row</div> <div class="d-table-cell">Display table-cell</div>

Flex

Display flex
Display inline-flex
<div class="d-flex">Display flex</div>
<div class="d-inline-flex">Display inline-flex</div>
<div class="d-flex">Display flex</div> <div class="d-inline-flex">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 class="d-sm-none">Display none for breakpoints sm and up</div>
<div class="d-md-none">Display none for breakpoints md and up</div>
<div class="d-lg-none">Display none for breakpoints lg and up</div>
<div class="d-xl-none">Display none for breakpoints xl and up</div>
<div class="d-xxl-none">Display none for breakpoints xxl and up</div>
<p>Example: Responsive variations of display none</p> <div class="d-sm-none">Display none for breakpoints sm and up</div> <div class="d-md-none">Display none for breakpoints md and up</div> <div class="d-lg-none">Display none for breakpoints lg and up</div> <div class="d-xl-none">Display none for breakpoints xl and up</div> <div class="d-xxl-none">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 class="d-print-none">Display none for print</div>
<div class="d-print-inline">Display inline for print</div>
<div class="d-print-block">Display block for print</div>
<div class="d-print-inline-block">Display inline-block for print</div>
<div class="d-print-grid">Display grid for print</div>
<div class="d-print-table">Display table for print</div>
<div class="d-print-table-row">Display table-row for print</div>
<div class="d-print-table-cell">Display table-cell for print</div>
<div class="d-print-flex">Display flex for print</div>
<div class="d-print-inline-flex">Display inline-flex for print</div>
<div class="d-print-none">Display none for print</div> <div class="d-print-inline">Display inline for print</div> <div class="d-print-block">Display block for print</div> <div class="d-print-inline-block">Display inline-block for print</div> <div class="d-print-grid">Display grid for print</div> <div class="d-print-table">Display table for print</div> <div class="d-print-table-row">Display table-row for print</div> <div class="d-print-table-cell">Display table-cell for print</div> <div class="d-print-flex">Display flex for print</div> <div class="d-print-inline-flex">Display inline-flex for print</div>