Placeholders
Default
Without content
With non-breaking space
To get the same height as the paragraph you can insert until content loads.
With content
Button
No text should be used in button when placeholder is being used.
<h4 class="h5 text-muted mt-3">Without content</h4>
<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> </code> until content loads.</p>
<h4 class="h5 text-muted mt-3">With content</h4>
<h4 class="h5 text-muted mt-3">Button</h4>
<p>No text should be used in button when placeholder is being used.</p><h4 class="h5 text-muted mt-3">Without content</h4>
<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> </code> until content loads.</p>
<h4 class="h5 text-muted mt-3">With content</h4>
<h4 class="h5 text-muted mt-3">Button</h4>
<p>No text should be used in button when placeholder is being used.</p>
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>
<h4 class="h5 text-muted mt-3">Grid column classes</h4>
<h4 class="h5 text-muted mt-3">Inline styles</h4><h4 class="h5 text-muted mt-3">Sizing utilites</h4>
<h4 class="h5 text-muted mt-3">Grid column classes</h4>
<h4 class="h5 text-muted mt-3">Inline styles</h4>
Colors
Default
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<h4 class="h5 text-muted mt-3">Default</h4>
<h4 class="h5 text-muted mt-3">Primary</h4>
<h4 class="h5 text-muted mt-3">Secondary</h4>
<h4 class="h5 text-muted mt-3">Success</h4>
<h4 class="h5 text-muted mt-3">Danger</h4>
<h4 class="h5 text-muted mt-3">Warning</h4>
<h4 class="h5 text-muted mt-3">Info</h4>
<h4 class="h5 text-muted mt-3">Light</h4>
<h4 class="h5 text-muted mt-3">Dark</h4><h4 class="h5 text-muted mt-3">Default</h4>
<h4 class="h5 text-muted mt-3">Primary</h4>
<h4 class="h5 text-muted mt-3">Secondary</h4>
<h4 class="h5 text-muted mt-3">Success</h4>
<h4 class="h5 text-muted mt-3">Danger</h4>
<h4 class="h5 text-muted mt-3">Warning</h4>
<h4 class="h5 text-muted mt-3">Info</h4>
<h4 class="h5 text-muted mt-3">Light</h4>
<h4 class="h5 text-muted mt-3">Dark</h4>
Sizing
Extra small
Small
Default
Large
<h4 class="h5 text-muted mt-3">Extra small</h4>
<h4 class="h5 text-muted mt-3">Small</h4>
<h4 class="h5 text-muted mt-3">Default</h4>
<h4 class="h5 text-muted mt-3">Large</h4><h4 class="h5 text-muted mt-3">Extra small</h4>
<h4 class="h5 text-muted mt-3">Small</h4>
<h4 class="h5 text-muted mt-3">Default</h4>
<h4 class="h5 text-muted mt-3">Large</h4>
Animation
Glow
Wave
<h4 class="h5 text-muted mt-3">Glow</h4>
<h4 class="h5 text-muted mt-3">Wave</h4><h4 class="h5 text-muted mt-3">Glow</h4>
<h4 class="h5 text-muted mt-3">Wave</h4>
Example
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">
<h4 class="card-title">Card title</h4>
<p class="card-text">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" 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">
<h4 class="card-title">Card title</h4>
<p class="card-text">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" disabled=""></button>
</div>
</div>