Bootstrap typography, including global settings, headings, body text, lists.
Bootstrap Typography Global settings
Use a native font stack that selects the best font-family for each OS and device.
For a more inclusive and accessible type scale, we use the browser’s default root font-size (typically 16px) so visitors can customize their browser defaults as needed.
Use the $font-family-base, $font-size-base, and $line-height-base attributes as our typographic base applied to the <body>.
Set the global link color via $link-color.
Use $body-bg to set a background-color on the <body> (#fff by default).
Bootstrap Headings
All HTML headings, <h1> through <h6>, are available.
Sample Code
Output
Bootstrap Customizing Headings
Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.
Sample Code
Output
Bootstrap Lead
Paragraph stand out by adding .lead .
Sample Code
Output
Bootstrap Inline Text Elements
Styling for common inline HTML5 elements.
Sample Code
Output
Bootstrap Abbreviations
Stylized implementation of HTML’s <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.
Add .initialism to an abbreviation for a slightly smaller font-size.
Sample Code
Output
Bootstrap Blockquotes
For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote"> around any HTML as the quote.
Sample Code
Output
Bootstrap blockquote Naming a source
The HTML spec requires that blockquote attribution be placed outside the <blockquote>. When providing attribution, wrap your <blockquote> in a <figure> and use a <figcaption> or a block level element (e.g., <p>) with the .blockquote-footer class.
Sample Code
Output
Bootstrap blockquote Alignment
Use text utilities as needed to change the alignment of your blockquote.
Sample Code
Output
Bootstrap Description list alignment
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.
Related Searches to Bootstrap Typography - Typography in Bootstrap
bootstrap font size smaller bootstrap font family font size bootstrap 4 bootstrap font size bootstrap font weight bootstrap font family list bootstrap font size responsive bootstrap 5 font size bootstrap font-family bootstrap font-family list bootstrap heading bootstrap font-weight bootstrap 5 font-family bootstrap typography bootstrap typography handson