Bootstrap 5 Learning Kit

   Copy to clipboard

   Open in CodePen

<h4 class="h5 text-muted mt-3">All breakpoints</h4>
<p>Left-aligned text.</p>
<p>Center-aligned text.</p>
<p>Right-aligned text.</p>
<h4 class="h5 text-muted mt-3">Responsive</h4>
<p>Right-aligned text for breakpoint sm and up.</p>
<p>Right-aligned text for breakpoint md and up.</p>
<p>Right-aligned text for breakpoint lg and up.</p>
<p>Right-aligned text for breakpoint xl and up.</p>
<p>Right-aligned text for breakpoint xxl and up.</p>
<p>Center-aligned text for breakpoint sm and up.</p>
<p>Center-aligned text for breakpoint md and up.</p>
<p>Center-aligned text for breakpoint lg and up.</p>
<p>Center-aligned text for breakpoint xl and up.</p>
<p>Center-aligned text for breakpoint xxl and up.</p>
<p class="text-end">Right-aligned text as default. Left-aligned text for breakpoint sm and up.</p>
<p class="text-end">Right-aligned text as default. Left-aligned text for breakpoint md and up.</p>
<p class="text-end">Right-aligned text as default. Left-aligned text for breakpoint lg and up.</p>
<p class="text-end">Right-aligned text as default. Left-aligned text for breakpoint xl and up.</p>
<p class="text-end">Right-aligned text as default. Left-aligned text for breakpoint xxl and up.</p>

   Copy to clipboard

   Open in CodePen

<div class="badge bg-secondary" style="width: 10rem;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien mi, eleifend at arcu ac, ullamcorper ultricies tortor. Aliquam sit amet pellentesque dui. Nam ultrices rhoncus sodales. Maecenas a ante turpis. Suspendisse at mauris ex. Cras quis lacus sit amet lacus iaculis vulputate ac id nibh. Vestibulum consectetur porta ante vitae iaculis. Sed pretium euismod arcu, ut aliquet ipsum rutrum venenatis.</p>

   Copy to clipboard

   Open in CodePen

<p>abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789</p>

   Copy to clipboard

   Open in CodePen

<p>Lowercased text</p>
<p>Uppercased text</p>
<p>Capitalized text</p>

   Copy to clipboard

   Open in CodePen

<p>Font size 1</p>
<p>Font size 2</p>
<p>Font size 3</p>
<p>Font size 4</p>
<p>Font size 5</p>
<p>Font size 6</p>

   Copy to clipboard

   Open in CodePen

<p>Bold text</p>
<p>Bolder text (relative to the parent element)</p>
<p>Semibold text</p>
<p><strong>Normal weight text</strong></p>
<p>Light text</p>
<p>Lighter text (relative to the parent element)</p>
<p>Italic text</p>
<p><em>Normal text</em></p>

   Copy to clipboard

   Open in CodePen

<h4 class="h5 text-muted mt-3">1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien mi, eleifend at arcu ac, ullamcorper ultricies tortor. Aliquam sit amet pellentesque dui. Nam ultrices rhoncus sodales. Maecenas a ante turpis. Suspendisse at mauris ex. Cras quis lacus sit amet lacus iaculis vulputate ac id nibh. Vestibulum consectetur porta ante vitae iaculis. Sed pretium euismod arcu, ut aliquet ipsum rutrum venenatis.</p>
<h4 class="h5 text-muted mt-3">Small</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien mi, eleifend at arcu ac, ullamcorper ultricies tortor. Aliquam sit amet pellentesque dui. Nam ultrices rhoncus sodales. Maecenas a ante turpis. Suspendisse at mauris ex. Cras quis lacus sit amet lacus iaculis vulputate ac id nibh. Vestibulum consectetur porta ante vitae iaculis. Sed pretium euismod arcu, ut aliquet ipsum rutrum venenatis.</p>
<h4 class="h5 text-muted mt-3">Base</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien mi, eleifend at arcu ac, ullamcorper ultricies tortor. Aliquam sit amet pellentesque dui. Nam ultrices rhoncus sodales. Maecenas a ante turpis. Suspendisse at mauris ex. Cras quis lacus sit amet lacus iaculis vulputate ac id nibh. Vestibulum consectetur porta ante vitae iaculis. Sed pretium euismod arcu, ut aliquet ipsum rutrum venenatis.</p>
<h4 class="h5 text-muted mt-3">Large</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien mi, eleifend at arcu ac, ullamcorper ultricies tortor. Aliquam sit amet pellentesque dui. Nam ultrices rhoncus sodales. Maecenas a ante turpis. Suspendisse at mauris ex. Cras quis lacus sit amet lacus iaculis vulputate ac id nibh. Vestibulum consectetur porta ante vitae iaculis. Sed pretium euismod arcu, ut aliquet ipsum rutrum venenatis.</p>

   Copy to clipboard

   Open in CodePen

<p>Monospace text</p>

   Copy to clipboard

   Open in CodePen

<p>Reset <a href="#">link</a> color</p>

   Copy to clipboard

   Open in CodePen

<p>Text with text line underneath it</p>
<p>Text with text line going through it</p>
<a href="#">Link without text decoration</a>