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></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></p>
<h4 class="h5 text-muted mt-3">With content</h4>
<p>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" disabled=""></button>
<h4 class="h5 text-muted mt-3">Without content</h4> <p></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></p> <h4 class="h5 text-muted mt-3">With content</h4> <p>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" 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></p><br>
<p></p><br>
<p></p><br>
<p></p><br>
<h4 class="h5 text-muted mt-3">Grid column classes</h4>
<p></p><br>
<p></p><br>
<p></p><br>
<p></p><br>
<p></p><br>
<p></p><br>
<p></p><br>
<p></p><br>
<p></p><br>
<p></p><br>
<p></p><br>
<p></p><br>
<h4 class="h5 text-muted mt-3">Inline styles</h4>
<p></p><br>
<p></p><br>
<p></p><br>
<p></p><br>
<h4 class="h5 text-muted mt-3">Sizing utilites</h4> <p></p><br> <p></p><br> <p></p><br> <p></p><br> <h4 class="h5 text-muted mt-3">Grid column classes</h4> <p></p><br> <p></p><br> <p></p><br> <p></p><br> <p></p><br> <p></p><br> <p></p><br> <p></p><br> <p></p><br> <p></p><br> <p></p><br> <p></p><br> <h4 class="h5 text-muted mt-3">Inline styles</h4> <p></p><br> <p></p><br> <p></p><br> <p></p><br>

Colors

Default

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

<h4 class="h5 text-muted mt-3">Default</h4>
<p></p>
<h4 class="h5 text-muted mt-3">Primary</h4>
<p></p>
<h4 class="h5 text-muted mt-3">Secondary</h4>
<p></p>
<h4 class="h5 text-muted mt-3">Success</h4>
<p></p>
<h4 class="h5 text-muted mt-3">Danger</h4>
<p></p>
<h4 class="h5 text-muted mt-3">Warning</h4>
<p></p>
<h4 class="h5 text-muted mt-3">Info</h4>
<p></p>
<h4 class="h5 text-muted mt-3">Light</h4>
<p></p>
<h4 class="h5 text-muted mt-3">Dark</h4>
<p></p>
<h4 class="h5 text-muted mt-3">Default</h4> <p></p> <h4 class="h5 text-muted mt-3">Primary</h4> <p></p> <h4 class="h5 text-muted mt-3">Secondary</h4> <p></p> <h4 class="h5 text-muted mt-3">Success</h4> <p></p> <h4 class="h5 text-muted mt-3">Danger</h4> <p></p> <h4 class="h5 text-muted mt-3">Warning</h4> <p></p> <h4 class="h5 text-muted mt-3">Info</h4> <p></p> <h4 class="h5 text-muted mt-3">Light</h4> <p></p> <h4 class="h5 text-muted mt-3">Dark</h4> <p></p>

Sizing

Extra small

Small

Default

Large

<h4 class="h5 text-muted mt-3">Extra small</h4>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<h4 class="h5 text-muted mt-3">Small</h4>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<h4 class="h5 text-muted mt-3">Default</h4>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<h4 class="h5 text-muted mt-3">Large</h4>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<h4 class="h5 text-muted mt-3">Extra small</h4> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <h4 class="h5 text-muted mt-3">Small</h4> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <h4 class="h5 text-muted mt-3">Default</h4> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <h4 class="h5 text-muted mt-3">Large</h4> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>

Animation

Glow

Wave

<h4 class="h5 text-muted mt-3">Glow</h4>
<div>
  <p></p>
</div>
<h4 class="h5 text-muted mt-3">Wave</h4>
<div>
  <p></p>
</div>
<h4 class="h5 text-muted mt-3">Glow</h4> <div> <p></p> </div> <h4 class="h5 text-muted mt-3">Wave</h4> <div> <p></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">
    <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>