Bootstrap 5 Learning Kit

XSXSSMSMMDMDLGLGXLXLXXLXXL
Extra small: <576pxSmall: ≥576pxMedium: ≥768pxLarge: ≥992pxExtra large: ≥1200pxExtra extra large: ≥1400px
Page Navigation:
DefaultWidthColorsSizingAnimationExample

Placeholders

Default

Without content

With non-breaking space

To get the same height as the paragraph you can insert &nbsp; until content loads.

 

With content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.

Button

No text should be used in button when placeholder is being used.

<h4 class="h5 text-muted mt-3">Without content</h4>
<p class="placeholder w-100"></p>
<h4 class="h5 text-muted mt-3">With non-breaking space</h4>
<p>To get the same height as the paragraph you can insert <code>&nbsp;</code> until content loads.</p>
<p class="placeholder w-100"> </p>
<h4 class="h5 text-muted mt-3">With content</h4>
<p class="placeholder">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
<h4 class="h5 text-muted mt-3">Button</h4>
<p>No text should be used in button when placeholder is being used.</p>
<button type="button" class="btn btn-primary placeholder col-2" disabled=""></button>
<h4 class="h5 text-muted mt-3">Without content</h4> <p class="placeholder w-100"></p> <h4 class="h5 text-muted mt-3">With non-breaking space</h4> <p>To get the same height as the paragraph you can insert <code>&nbsp;</code> until content loads.</p> <p class="placeholder w-100"> </p> <h4 class="h5 text-muted mt-3">With content</h4> <p class="placeholder">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p> <h4 class="h5 text-muted mt-3">Button</h4> <p>No text should be used in button when placeholder is being used.</p> <button type="button" class="btn btn-primary placeholder col-2" disabled=""></button>

Width

Use sizing utilities, grid column classes or inline styles.

Sizing utilites





Grid column classes













Inline styles





<h4 class="h5 text-muted mt-3">Sizing utilites</h4>
<p class="placeholder w-25"></p><br>
<p class="placeholder w-50"></p><br>
<p class="placeholder w-75"></p><br>
<p class="placeholder w-100"></p><br>
<h4 class="h5 text-muted mt-3">Grid column classes</h4>
<p class="placeholder col-1"></p><br>
<p class="placeholder col-2"></p><br>
<p class="placeholder col-3"></p><br>
<p class="placeholder col-4"></p><br>
<p class="placeholder col-5"></p><br>
<p class="placeholder col-6"></p><br>
<p class="placeholder col-7"></p><br>
<p class="placeholder col-8"></p><br>
<p class="placeholder col-9"></p><br>
<p class="placeholder col-10"></p><br>
<p class="placeholder col-11"></p><br>
<p class="placeholder col-12"></p><br>
<h4 class="h5 text-muted mt-3">Inline styles</h4>
<p class="placeholder" style="width: 20%"></p><br>
<p class="placeholder" style="width: 40%"></p><br>
<p class="placeholder" style="width: 60%"></p><br>
<p class="placeholder" style="width: 80%"></p><br>
<h4 class="h5 text-muted mt-3">Sizing utilites</h4> <p class="placeholder w-25"></p><br> <p class="placeholder w-50"></p><br> <p class="placeholder w-75"></p><br> <p class="placeholder w-100"></p><br> <h4 class="h5 text-muted mt-3">Grid column classes</h4> <p class="placeholder col-1"></p><br> <p class="placeholder col-2"></p><br> <p class="placeholder col-3"></p><br> <p class="placeholder col-4"></p><br> <p class="placeholder col-5"></p><br> <p class="placeholder col-6"></p><br> <p class="placeholder col-7"></p><br> <p class="placeholder col-8"></p><br> <p class="placeholder col-9"></p><br> <p class="placeholder col-10"></p><br> <p class="placeholder col-11"></p><br> <p class="placeholder col-12"></p><br> <h4 class="h5 text-muted mt-3">Inline styles</h4> <p class="placeholder" style="width: 20%"></p><br> <p class="placeholder" style="width: 40%"></p><br> <p class="placeholder" style="width: 60%"></p><br> <p class="placeholder" style="width: 80%"></p><br>

Colors

Default

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

<h4 class="h5 text-muted mt-3">Default</h4>
<p class="placeholder w-100"></p>
<h4 class="h5 text-muted mt-3">Primary</h4>
<p class="placeholder w-100 bg-primary"></p>
<h4 class="h5 text-muted mt-3">Secondary</h4>
<p class="placeholder w-100 bg-secondary"></p>
<h4 class="h5 text-muted mt-3">Success</h4>
<p class="placeholder w-100 bg-success"></p>
<h4 class="h5 text-muted mt-3">Danger</h4>
<p class="placeholder w-100 bg-danger"></p>
<h4 class="h5 text-muted mt-3">Warning</h4>
<p class="placeholder w-100 bg-warning"></p>
<h4 class="h5 text-muted mt-3">Info</h4>
<p class="placeholder w-100 bg-info"></p>
<h4 class="h5 text-muted mt-3">Light</h4>
<p class="placeholder w-100 bg-light"></p>
<h4 class="h5 text-muted mt-3">Dark</h4>
<p class="placeholder w-100 bg-dark"></p>
<h4 class="h5 text-muted mt-3">Default</h4> <p class="placeholder w-100"></p> <h4 class="h5 text-muted mt-3">Primary</h4> <p class="placeholder w-100 bg-primary"></p> <h4 class="h5 text-muted mt-3">Secondary</h4> <p class="placeholder w-100 bg-secondary"></p> <h4 class="h5 text-muted mt-3">Success</h4> <p class="placeholder w-100 bg-success"></p> <h4 class="h5 text-muted mt-3">Danger</h4> <p class="placeholder w-100 bg-danger"></p> <h4 class="h5 text-muted mt-3">Warning</h4> <p class="placeholder w-100 bg-warning"></p> <h4 class="h5 text-muted mt-3">Info</h4> <p class="placeholder w-100 bg-info"></p> <h4 class="h5 text-muted mt-3">Light</h4> <p class="placeholder w-100 bg-light"></p> <h4 class="h5 text-muted mt-3">Dark</h4> <p class="placeholder w-100 bg-dark"></p>

Sizing

Extra small

Small

Default

Large

<h4 class="h5 text-muted mt-3">Extra small</h4>
<p class="placeholder placeholder-xs w-100 fs-1"></p>
<p class="placeholder placeholder-xs w-100 fs-2"></p>
<p class="placeholder placeholder-xs w-100 fs-3"></p>
<p class="placeholder placeholder-xs w-100 fs-4"></p>
<p class="placeholder placeholder-xs w-100 fs-5"></p>
<p class="placeholder placeholder-xs w-100 fs-6"></p>
<h4 class="h5 text-muted mt-3">Small</h4>
<p class="placeholder placeholder-sm w-100 fs-1"></p>
<p class="placeholder placeholder-sm w-100 fs-2"></p>
<p class="placeholder placeholder-sm w-100 fs-3"></p>
<p class="placeholder placeholder-sm w-100 fs-4"></p>
<p class="placeholder placeholder-sm w-100 fs-5"></p>
<p class="placeholder placeholder-sm w-100 fs-6"></p>
<h4 class="h5 text-muted mt-3">Default</h4>
<p class="placeholder w-100 fs-1"></p>
<p class="placeholder w-100 fs-2"></p>
<p class="placeholder w-100 fs-3"></p>
<p class="placeholder w-100 fs-4"></p>
<p class="placeholder w-100 fs-5"></p>
<p class="placeholder w-100 fs-6"></p>
<h4 class="h5 text-muted mt-3">Large</h4>
<p class="placeholder placeholder-lg w-100 fs-1"></p>
<p class="placeholder placeholder-lg w-100 fs-2"></p>
<p class="placeholder placeholder-lg w-100 fs-3"></p>
<p class="placeholder placeholder-lg w-100 fs-4"></p>
<p class="placeholder placeholder-lg w-100 fs-5"></p>
<p class="placeholder placeholder-lg w-100 fs-6"></p>
<h4 class="h5 text-muted mt-3">Extra small</h4> <p class="placeholder placeholder-xs w-100 fs-1"></p> <p class="placeholder placeholder-xs w-100 fs-2"></p> <p class="placeholder placeholder-xs w-100 fs-3"></p> <p class="placeholder placeholder-xs w-100 fs-4"></p> <p class="placeholder placeholder-xs w-100 fs-5"></p> <p class="placeholder placeholder-xs w-100 fs-6"></p> <h4 class="h5 text-muted mt-3">Small</h4> <p class="placeholder placeholder-sm w-100 fs-1"></p> <p class="placeholder placeholder-sm w-100 fs-2"></p> <p class="placeholder placeholder-sm w-100 fs-3"></p> <p class="placeholder placeholder-sm w-100 fs-4"></p> <p class="placeholder placeholder-sm w-100 fs-5"></p> <p class="placeholder placeholder-sm w-100 fs-6"></p> <h4 class="h5 text-muted mt-3">Default</h4> <p class="placeholder w-100 fs-1"></p> <p class="placeholder w-100 fs-2"></p> <p class="placeholder w-100 fs-3"></p> <p class="placeholder w-100 fs-4"></p> <p class="placeholder w-100 fs-5"></p> <p class="placeholder w-100 fs-6"></p> <h4 class="h5 text-muted mt-3">Large</h4> <p class="placeholder placeholder-lg w-100 fs-1"></p> <p class="placeholder placeholder-lg w-100 fs-2"></p> <p class="placeholder placeholder-lg w-100 fs-3"></p> <p class="placeholder placeholder-lg w-100 fs-4"></p> <p class="placeholder placeholder-lg w-100 fs-5"></p> <p class="placeholder placeholder-lg w-100 fs-6"></p>

Animation

Glow

Wave

<h4 class="h5 text-muted mt-3">Glow</h4>
<div class="placeholder-glow">
  <p class="placeholder w-100"></p>
</div>
<h4 class="h5 text-muted mt-3">Wave</h4>
<div class="placeholder-wave">
  <p class="placeholder w-100"></p>
</div>
<h4 class="h5 text-muted mt-3">Glow</h4> <div class="placeholder-glow"> <p class="placeholder w-100"></p> </div> <h4 class="h5 text-muted mt-3">Wave</h4> <div class="placeholder-wave"> <p class="placeholder w-100"></p> </div>

Example

Card image in the top

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.

<div class="card w-50">
  <img src="../img/400x200.png" alt="Card image in the top" class="card-img-top">
  <div class="card-body placeholder-wave">
    <h4 class="card-title placeholder">Card title</h4>
    <p class="card-text placeholder">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
    <button type="button" class="btn btn-primary placeholder col-2" disabled=""></button>
  </div>
</div>
<div class="card w-50"> <img src="../img/400x200.png" alt="Card image in the top" class="card-img-top"> <div class="card-body placeholder-wave"> <h4 class="card-title placeholder">Card title</h4> <p class="card-text placeholder">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p> <button type="button" class="btn btn-primary placeholder col-2" disabled=""></button> </div> </div>