Typography

Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.

Heading

All HTML headings, <h1> through <h6>, are available.

Heading Example

<h1></h1>

h1. Bootstrap heading

<h2></h2>

h2. Bootstrap heading

<h3></h3>

h3. Bootstrap heading

<h4></h4>

h4. Bootstrap heading

<h5></h5>

h5. Bootstrap heading

<h6></h6>

h6. Bootstrap heading
								
									<h1>h1. Bootstrap heading</h1>
									<h2>h2. Bootstrap heading</h2>
									<h3>h3. Bootstrap heading</h3>
									<h4>h4. Bootstrap heading</h4>
									<h5>h5. Bootstrap heading</h5>
									<h6>h6. Bootstrap heading</h6>
								
							

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

								
									<p class="h1">h1. Bootstrap heading</p>
									<p class="h2">h2. Bootstrap heading</p>
									<p class="h3">h3. Bootstrap heading</p>
									<p class="h4">h4. Bootstrap heading</p>
									<p class="h5">h5. Bootstrap heading</p>
									<p class="h6">h6. Bootstrap heading</p>
								
							

Blockquotes

For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote"> around any HTML as the quote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

								
									<blockquote class="blockquote">
										<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
									</blockquote>
								
							
Naming a source

Add a <footer class="blockquote-footer"> for identifying the source. Wrap the name of the source work in <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
								
									<blockquote class="blockquote">
										<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
										<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
									</blockquote>
								
							
Alignment

Use text utilities as needed to change the alignment of your blockquote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
								
									<blockquote class="blockquote text-center">
										<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
										<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
									</blockquote>
								
							

Text States

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

								
									<p class="text-primary">Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
									<p class="text-secondary">Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
									<p class="text-info">Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
									<p class="text-success">Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
									<p class="text-warning">Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
									<p class="text-danger">Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
									<p class="text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>