Headings, paragraphs, text styles, lists & display type
HTML heading tags are used to organize your content and create hierarchy.
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>
Paragraphs are the building blocks for organizing your text content.
This is a lead paragraph. It has a larger and more attention-grabbing appearance.
This is a normal paragraph. It is displayed with standard text size and weight.
This is a small paragraph. It is displayed with smaller text size.
<p class="lead">This is a lead paragraph.</p>
<p>This is a normal paragraph.</p>
<p class="small">This is a small paragraph.</p>
You can use various text styles to emphasize and format your text.
Bold text
Italic text
Underlined text
Strikethrough text
Highlighted text
Code text
Small text
<strong>Bold text</strong>
<em>Italic text</em>
<u>Underlined text</u>
<s>Strikethrough text</s>
<mark>Highlighted text</mark>
<code>Code text</code>
<small>Small text</small>
You can easily align your text using Bootstrap classes.
This text is aligned to the left.
This text is aligned to the center.
This text is aligned to the right.
This text is justified. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.
<p class="text-start">This text is aligned to the left.</p>
<p class="text-center">This text is aligned to the center.</p>
<p class="text-end">This text is aligned to the right.</p>
<p class="text-justify">This text is justified.</p>
You can organize your content using different types of lists.
Blockquotes are used to display content from other sources.
Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world.
<blockquote class="blockquote">
<p>Quote text</p>
<footer class="blockquote-footer">Source</footer>
</blockquote>
You can color your text using Bootstrap's text color classes.
This text is in primary color.
This text is in secondary color.
This text is in success color.
This text is in danger color.
This text is in warning color.
This text is in info color.
This text is in light color.
This text is in dark color.
This text is in muted color.
<p class="text-primary">This text is in primary color.</p>
<p class="text-secondary">This text is in secondary color.</p>
<p class="text-success">This text is in success color.</p>
<p class="text-danger">This text is in danger color.</p>
<p class="text-warning">This text is in warning color.</p>
<p class="text-info">This text is in info color.</p>
<p class="demo-surface-inverse p-2">This text is in light color.</p>
<p class="text-dark">This text is in dark color.</p>
<p class="text-muted">This text is in muted color.</p>
Display headings are designed to stand out more than normal headings.
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
Transform your text using Bootstrap's text transformation classes.
This Text Is Lowercase.
This text is uppercase.
this text is capitalized.
<p class="text-lowercase">This Text Is Lowercase.</p>
<p class="text-uppercase">This text is uppercase.</p>
<p class="text-capitalize">this text is capitalized.</p>