Typography

Examples

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

Display 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>

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Headings

                                    
                                        <h1>Heading 1 Sub Heading</h1>
                                    

                                    
                                        <h2>Heading 2 Sub Heading</h2>
                                    

                                    
                                        <h3>Heading 3 Sub Heading</h3>
                                    

                                    
                                        <h4>Heading 4 Sub Heading</h4>
                                    

                                    
                                        <h5>Heading 5 Sub Heading</h5>
                                    

                                    
                                        <h6>Heading 6 Sub Heading</h6>

Heading 1 Sub Heading

Heading 2 Sub Heading

Heading 3 Sub Heading

Heading 4 Sub Heading

Heading 5 Sub Heading

Heading 6 Sub Heading

Naming a Source

                                    
                                        <figure>
                                            <blockquote class="blockquote">
                                            <p>A well-known quote, contained in a blockquote element.</p>
                                            </blockquote>
                                            <figcaption class="blockquote-footer">
                                            Someone famous in <cite title="Source Title">Source Title</cite>
                                            </figcaption>
                                        </figure>

A well-known quote, contained in a blockquote element.

"Design is not just what it looks like and feels like. Design is how it works."

Inline Text Elements

                                    
                                        <p class="lead">Your title goes here</p>
                                    

                                    
                                        <p>You can use the mark tag to <mark>highlight</mark> text.<
                                    

                                    
                                        <p><del>This line of text is meant to be treated as deleted text.</del><
                                    

                                    
                                        <p><s>This line of text is meant to be treated as no longer accurate.</s><
                                    

                                    
                                        <p><ins>This line of text is meant to be treated as an addition to the document.</ins><
                                    

                                    
                                        <p><u>This line of text will render as underlined</u><
                                    

                                    
                                        <p><small>This line of text is meant to be treated as fine print.</small><
                                    

                                    
                                        <p><strong>This line rendered as bold text.</strong><
                                    

                                    
                                        <p><em>This line rendered as italicized text.</em><
                                    

                                    
                                        Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue.

Styling for common inline HTML5 elements.

Your title goes here

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text is meant to be treated as an addition to thedocument.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Nulla attr vitae elit libero, a pharetra augue.

Unordered

                                    
                                        <ul>
                                            <li>
                                                Fully responsive design
                                            </li>
                                            <li>
                                                Built with Bootstrap 5 framework
                                            </li>
                                            <li>
                                                Clean and modern UI components
                                            </li>
                                            <li>
                                                Cross-browser compatibility
                                            </li>
                                            <li>
                                                Multiple form elements and validations
                                                <ul>
                                                    <li>
                                                        Rich input controls
                                                    </li>
                                                    <li>
                                                        Step-based form wizards
                                                    </li>
                                                    <li>
                                                        Real-time validation
                                                    </li>
                                                    <li>
                                                        Customizable styles
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                Advanced chart and graph libraries
                                            </li>
                                            <li>
                                                Integrated data tables and sorting
                                            </li>
                                            <li>
                                                Developer-friendly code structure
                                            </li>
                                        </ul>

A list of items in which the order does not explicitly matter.

Fully responsive design
Built with Bootstrap 5 framework
Clean and modern UI components
Cross-browser compatibility
Multiple form elements and validations
- Rich input controls
- Step-based form wizards
- Real-time validation
- Customizable styles
Advanced chart and graph libraries
Integrated data tables and sorting
Developer-friendly code structure

Ordered

                                    
                                        <ol>
                                            <li>
                                                Install all dependencies
                                            </li>
                                            <li>
                                                Configure project environment settings
                                            </li>
                                            <li>
                                                Set up folder structure and routing
                                            </li>
                                            <li>
                                                Integrate UI components and layout
                                            </li>
                                            <li>
                                                Implement core modules
                                                <ol>
                                                    <li>
                                                        Authentication & Authorization
                                                    </li>
                                                    <li>
                                                        Dashboard widgets and metrics
                                                    </li>
                                                    <li>
                                                        User profile management
                                                    </li>
                                                    <li>
                                                        Notification & messaging systems
                                                    </li>
                                                </ol>
                                            </li>
                                            <li>
                                                Connect backend APIs and test data flow
                                            </li>
                                            <li>
                                                Optimize performance and responsive design
                                            </li>
                                            <li>
                                                Final testing and deployment
                                            </li>
                                        </ol>

A list of items in which the order does explicitly matter.

Install all dependencies
Configure project environment settings
Set up folder structure and routing
Integrate UI components and layout
Implement core modules
1. Authentication & Authorization
2. Dashboard widgets and metrics
3. User profile management
4. Notification & messaging systems
Connect backend APIs and test data flow
Optimize performance and responsive design
Final testing and deployment

Unstyled

                                    
                                        <ul class="list-unstyled">
                                            <li>
                                                Install project dependencies
                                            </li>
                                            <li>
                                                Configure build settings
                                                <ul>
                                                    <li>
                                                        Update environment variables
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                Setup project structure and routes
                                            </li>
                                            <li>
                                                Launch local development server
                                            </li>
                                        </ul>
                                        
                                        <h5 class="fw-semibold">Inline List</h5>
                                        <p class="text-muted m-b-15">
                                            Display list items horizontally using <code>display: inline-block;</code> and appropriate spacing.
                                        </p>
                                        
                                        <ul class="list-inline">
                                            <li class="list-inline-item">
                                                HTML
                                            </li>
                                            <li class="list-inline-item">
                                                CSS
                                            </li>
                                            <li class="list-inline-item">
                                                JavaScript
                                            </li>
                                        </ul>

This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

Install project dependencies
Configure build settings
- Update environment variables
Setup project structure and routes
Launch local development server

Inline List

Display list items horizontally using display: inline-block; and appropriate spacing.

HTML
CSS
JavaScript

Abbreviations

                                    
                                        <p><abbr title="attribute">attr</abbr></p>
                                    

                                    
                                        <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Add .initialism to an abbreviation for a slightly smaller font-size.

attr

HTML

Alignment

                                    
                                        <figure class="text-center">
                                            <blockquote class="blockquote">
                                                <p>"..."</p>
                                            </blockquote>
                                            <figcaption class="blockquote-footer">
                                                Steve Jobs in <cite title="Steve Jobs Biography">Steve Jobs Biography</cite>
                                            </figcaption>
                                        </figure>
                                    
                                    
                                    
                                        <figure class="text-end">
                                            <blockquote class="blockquote">
                                                <p>"..."</p>
                                            </blockquote>
                                            <figcaption class="blockquote-footer">
                                                Leonardo da Vinci in <cite title="Design Philosophy">Design Philosophy</cite>
                                            </figcaption>
                                        </figure>

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

"Design is not just what it looks like and feels like. Design is how it works."

"Simplicity is the ultimate sophistication."

Inline

                                    
                                        <ul class="list-inline">
                                            <li class="list-inline-item">This is a list item.</li>
                                            <li class="list-inline-item">And another one.</li>
                                            <li class="list-inline-item">But they're displayed inline.</li>
                                        </ul>

Remove a list's bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.

This is a list item.
And another one.
But they're displayed inline.

Blockquotes

                                    
                                        <blockquote class="blockquote">
                                            <p class="mb-0">"..."</p>
                                        </blockquote>
                                        <figcaption class="blockquote-footer">
                                            Joe Sparano in <cite title="Design Principles">Design Principles</cite>
                                        </figcaption>
                                    
                                    
                                    
                                        <p class="text-muted m-b-15">
                                            ...
                                        </p>
                                    
                                    
                                    
                                        <blockquote class="blockquote text-center">
                                            <p class="mb-0">"..."</p>
                                        </blockquote>
                                        <figcaption class="blockquote-footer text-center">
                                            John Johnson in <cite title="Developer Wisdom">Developer Wisdom</cite>
                                        </figcaption>
                                    
                                    
                                    
                                        <blockquote class="blockquote text-end">
                                            <p class="mb-0">"..."</p>
                                        </blockquote>
                                        <figcaption class="blockquote-footer text-end">
                                            Austin Freeman in <cite title="Efficiency in Design">Efficiency in Design</cite>
                                        </figcaption>

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

"Good design is obvious. Great design is transparent."

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

"First, solve the problem. Then, write the code."

John Johnson in Developer Wisdom

"Simplicity is the soul of efficiency."

Austin Freeman in Efficiency in Design

Description List Alignment

                                    
                                        <dl class="row mb-0">
                                            <dt class="col-sm-3">Dashboard</dt>
                                            <dd class="col-sm-9">...</dd>
                                    
                                            <dt class="col-sm-3">Form Validation</dt>
                                            <dd class="col-sm-9">
                                                <p>...</p>
                                                <p>...</p>
                                            </dd>
                                    
                                            <dt class="col-sm-3">Responsive Grid</dt>
                                            <dd class="col-sm-9">...</dd>
                                    
                                            <dt class="col-sm-3 text-truncate">User Management Module</dt>
                                            <dd class="col-sm-9">...</dd>
                                    
                                            <dt class="col-sm-3">Nested Features</dt>
                                            <dd class="col-sm-9">
                                                <dl class="row mb-0">
                                                    <dt class="col-sm-4">Email Notifications</dt>
                                                    <dd class="col-sm-8">...</dd>
                                                </dl>
                                            </dd>
                                        </dl>

Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a .text-truncate class to truncate the text with an ellipsis.

Dashboard

An overview panel that displays key metrics and activity summaries.

Form Validation

Includes validation for all major input types with real-time feedback.

Built-in support for custom rules and error messages.

Responsive Grid

Utilizes Bootstrap’s flexible grid layout for consistent responsiveness across devices.

User Management Module

Easily manage roles, permissions, and user profiles from a single interface.

Nested Features