Bootstrap - Typography



Bootstrap offers default heading styles that make it easy to create consistent and appealing headings throughout your web pages. By using Bootstrap's predefined classes, you can quickly apply styles to your heading elements (<h1> to <h6>).

To use Bootstrap's default heading styles, apply the appropriate heading tag to your content.

Example: Default heading tags

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

These heading tags will automatically inherit Bootstrap's default styles, which include specific font sizes, font weights, and line heights for each heading level.

If you want to change the size and color of your headings, Bootstrap provides utility classes that you can apply to your heading elements. To change the font size of a heading, you can use classes like .h1 to .h6. These classes correspond to the default font sizes of the respective heading tags.

Example: Custom heading sizes

<h1 class="h3">Heading 1 with h3 size</h1>
<h2 class="h5">Heading 2 with h5 size</h2>

To change the color of a heading, you can use Bootstrap's text color utility classes, such as .text-primary, .text-secondary, .text-success, etc.

Example: Custom heading colors

<h1 class="text-primary">Heading 1 with primary color</h1>
<h2 class="text-success">Heading 2 with success color</h2>

Bootstrap also offers responsive heading classes that allow you to adjust the font size of your headings based on the screen size. By adding the responsive breakpoint abbreviation (e.g., -sm, -md, -lg, -xl) to the heading class, you can specify different font sizes for different screen sizes.

Example: Responsive heading sizes

<h1 class="h1-sm h2-md h3-lg">Responsive Heading</h1>

By using Bootstrap's default heading styles, customizing heading sizes and colors, and creating responsive headings with classes, you can easily create visually consistent and adaptable headings throughout your web pages.

Body Text

Bootstrap offers classes to style and format paragraphs, making it easy to create structured and readable body text. By applying these classes to your <p> elements, you can adjust the font size, line height, and emphasis of your paragraphs.

To style your paragraphs with Bootstrap's default classes, you can use the <p> tag without any additional classes. This will apply the default font size and line height to your paragraph text.

Example: Default Paragraph

<p>This is a default paragraph in Bootstrap.</p>

Adjusting the font size of your paragraphs is easy with Bootstrap's font size utility classes. These classes include .fs-1 to .fs-6, which correspond to different font sizes.

Example: Font Size

<p class="fs-5">This paragraph has a larger font size.</p>
<p class="fs-6">This paragraph has a smaller font size.</p>

To control the line height of your paragraphs, Bootstrap provides the .lh-* classes. You can use classes like .lh-1, .lh-sm, .lh-base, and .lh-lg to set different line heights for your paragraph text.

Example: Line Height

<p class="lh-sm">This paragraph has a small line height.</p>
<p class="lh-lg">This paragraph has a large line height.</p>

Bootstrap also has a class called .lead that you can use to create lead paragraphs. Lead paragraphs are used to draw attention to important information or to provide an introduction to the main content. The .lead class increases the font size and adjusts the line height to create visually distinct paragraphs.

Example: Lead Paragraph

<p class="lead">This is a lead paragraph in Bootstrap, which stands out from regular paragraphs.</p>

By styling paragraphs with Bootstrap classes, adjusting font sizes and line heights, and using lead paragraphs for emphasis, you can create structured and visually appealing body text in your web pages. These classes provide a quick and consistent way to format your paragraph content and improve readability.

Inline Text Elements

Bootstrap has classes for formatting inline text elements, letting you add meaning and emphasis to parts of your content. These classes can be used on inline elements like <span>, <strong>, <em>, and others.

To format inline text with Bootstrap classes, use these classes:

Class Description
.text-muted Applies a muted color to the text, showing less important or secondary content.
.text-lowercase Changes the text to lowercase.
.text-uppercase Changes the text to uppercase.
.text-capitalize Capitalizes the first letter of each word in the text.
.fw-bold Applies bold font weight to the text.
.fw-normal Applies normal font weight to the text.
.fst-italic Applies italic font style to the text.

Example of text formatting with Bootstrap classes

<p>This is <span class="text-muted">muted text</span> within a paragraph.</p>
<p>This is <span class="text-uppercase">uppercase text</span> within a paragraph.</p>
<p>This is <span class="fw-bold">bold text</span> within a paragraph.</p>

Bootstrap also has text color classes that let you convey meaning through color. These classes include:

Class Description
.text-primary Applies the primary color to the text.
.text-secondary Applies the secondary color to the text.
.text-success Applies the success color (green) to the text.
.text-danger Applies the danger color (red) to the text.
.text-warning Applies the warning color (yellow) to the text.
.text-info Applies the info color (blue) to the text.
.text-light Applies a light color to the text.
.text-dark Applies a dark color to the text.

Example of text color classes in Bootstrap

<p>This is <span class="text-primary">primary text</span> within a paragraph.</p>
<p>This is <span class="text-success">success text</span> within a paragraph.</p>
<p>This is <span class="text-warning">warning text</span> within a paragraph.</p>

To highlight or emphasize parts of text, Bootstrap has these classes:

Class Description
.mark Highlights the text with a yellow background color.
.small Reduces the font size of the text.
.text-decoration-underline Adds an underline to the text.
.text-decoration-line-through Adds a line-through (strikethrough) to the text.

Example of highlighting and emphasizing text with Bootstrap

<p>This text contains <span class="mark">highlighted words</span> for emphasis.</p>
<p>This text contains <small>smaller text</small> for extra information.</p>
<p>This text contains <span class="text-decoration-underline">underlined words</span> for emphasis.</p>

By using these Bootstrap classes for inline text formatting, text colors, and highlighting/emphasizing text, you can add variety and convey meaning to parts of your content. This improves the readability and understanding of your text for your users.


Blockquotes are used to highlight quotes or important passages of text from external sources. Bootstrap offers a way to create and style blockquotes using the <blockquote> element and additional classes.

To create a basic blockquote in Bootstrap, wrap the quoted text in a <blockquote> element and use the .blockquote class. This adds left padding and a left border to the blockquote.

Example: Basic Blockquote

<blockquote class="blockquote">
  <p>This is a basic blockquote in Bootstrap. It has left padding and a left border.</p>

Bootstrap provides additional classes to style your blockquotes. The .blockquote-footer class can be used to identify the source of the quote. It should be wrapped in a <footer> or <cite> element and placed inside the <blockquote>.

Example: Blockquote with Attribution

<blockquote class="blockquote">
  <p>This is a blockquote with attribution.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>

To align the blockquote to the right, you can add the .blockquote-reverse class to the <blockquote> element. This will align the blockquote to the right and add a right border.

Example: Right-aligned Blockquote

<blockquote class="blockquote blockquote-reverse">
  <p>This is a right-aligned blockquote.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>

You can also customize the appearance of your blockquotes by combining them with other Bootstrap classes. For example, you can use text alignment classes (.text-start, .text-center, .text-end) to align the blockquote content.

Example: Centered Blockquote

<blockquote class="blockquote text-center">
  <p>This is a centered blockquote.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>


Bootstrap provides classes to style both unordered (<ul>) and ordered (<ol>) lists, making it easy to create lists in your web pages.

To style an unordered list, you can use the .list-unstyled class. This class removes the default list-style and left margin on list items, allowing you to create lists without bullet points.

Example: Unordered List Without Bullet Points

<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>

For ordered lists, you can apply the .list-unstyled class to remove the default numbering and left margin.

Example: Ordered List Without Numbering

<ol class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>

Bootstrap allows you to create inline lists, where list items are displayed horizontally instead of vertically. To create an inline list, apply the .list-inline class to the <ul> or <ol> element, and use the .list-inline-item class on each <li> element.

Example: Inline List

<ul class="list-inline">
  <li class="list-inline-item">Item 1</li>
  <li class="list-inline-item">Item 2</li>
  <li class="list-inline-item">Item 3</li>

You can customize the styles and spacing of your lists using Bootstrap's utility classes. For example, you can add margin or padding to list items using classes like .m-* or .p-*.

Example: List with Custom Margin

<ul class="list-unstyled">
  <li class="mb-2">Item 1</li>
  <li class="mb-2">Item 2</li>
  <li>Item 3</li>

You can nest lists inside other lists to create multi-level lists. Bootstrap's default styles will automatically adjust the indentation for nested lists.

Example: Nested List

  <li>Item 1</li>
    Item 2
      <li>Nested Item 1</li>
      <li>Nested Item 2</li>
  <li>Item 3</li>

Code and Preformatted Text

Bootstrap helps you show code snippets and preformatted text in your web pages, so you can easily display code examples or keep text formatting.

To show inline code snippets, use the <code> element. Bootstrap styles the <code> element with a monospace font and adds a background color and padding to make it stand out from the surrounding text.

Inline Code Snippet Example

<p>To create a link, use the <code>&lt;a&gt;</code> tag.</p>

For multi-line code blocks, use the <pre> element. Bootstrap uses a monospace font and keeps whitespace and line breaks within the <pre> element. To style a code block, combine the <pre> element with the <code> element.

Multi-line Code Block Example

<pre><code>function greet(name) {
  console.log(`Hello, ${name}!`);

Bootstrap also has a .pre-scrollable class that you can add to the <pre> element. This class sets a max-height and adds a vertical scrollbar to the code block if the content is too long.

Pre-scrollable Class Example

<pre class="pre-scrollable"><code>// Long code block
function longFunction() {
  // ...
  // ...
  // ...

In addition to code snippets and blocks, you can use the <pre> element to show preformatted text, such as ASCII art or text that needs specific formatting. The <pre> element keeps whitespace, line breaks, and typography within its content.

Preformatted Text Example

 /     \
| () () |
 \  ^  /

Responsive Typography

Bootstrap offers responsive typography classes that let you adjust the font sizes of your text based on the screen size, making sure your content stays readable on devices of all sizes.

To use responsive typography classes, add the desired class to your text element. These classes include:

Class Description
.fs-1 to .fs-6 Sets the font size from largest (fs-1) to smallest (fs-6)
.fs-sm-1 to .fs-sm-6 Sets the font size for small screens (≥576px)
.fs-md-1 to .fs-md-6 Sets the font size for medium screens (≥768px)
.fs-lg-1 to .fs-lg-6 Sets the font size for large screens (≥992px)
.fs-xl-1 to .fs-xl-6 Sets the font size for extra-large screens (≥1200px)

Example: Adjusting font size based on screen size

<p class="fs-5 fs-sm-4 fs-md-3 fs-lg-2 fs-xl-1">
  This text will adjust its font size based on the screen size.

By using these classes, you can create text that adapts its font size to the screen size, getting smaller on smaller screens and larger on bigger screens. This helps keep your text easy to read no matter what device your user has.

Bootstrap also has responsive display heading classes (.display-1 to .display-6) that you can combine with the responsive font size classes to create headings that scale well on all screen sizes.

Example: Using responsive display heading classes

<h1 class="display-4 fs-md-3 fs-lg-1">Responsive Display Heading</h1>

To further control readability, you can also use Bootstrap's responsive line height classes (.lh-sm, .lh-md, .lh-lg, .lh-xl) to adjust the spacing between lines of text on different screen sizes.

Example: Adjusting line height based on screen size

<p class="fs-5 fs-md-4 lh-md">
  This paragraph will have a different line height on medium screens and above.

Customizing Typography

While Bootstrap provides a foundation for typography, you may want to customize the default styles to match your project's design. Bootstrap allows you to override the default typography styles, use custom fonts, and adjust typography settings through Sass variables.

To override the default Bootstrap typography styles, you can create a separate CSS file or use the <style> tag in your HTML file. Then, use CSS selectors to target the elements you want to modify and apply your custom styles.

Example: Override default styles

  body {
    font-family: 'Custom Font', sans-serif;
    font-size: 18px;
    line-height: 1.6;

  h1 {
    font-size: 36px;
    color: #333;

We override the default font family, font size, and line height for the <body> element. We also change the font size and color of the <h1> element.

Bootstrap allows you to use custom fonts in your project. To use a custom font, you can either host the font files on your server or use a web font service like Google Fonts. Once you have the font files or the font embedding code, include it in your HTML file.

Example: Using Google Fonts

  <link href="" rel="stylesheet">
    body {
      font-family: 'Custom Font', sans-serif;

We use Google Fonts to include a custom font. We add the font embedding code in the <head> section of our HTML file and then apply the custom font to the <body> element using CSS.

If you are using Sass in your project, you can customize Bootstrap's typography settings by modifying the Sass variables. Bootstrap provides variables for font family, font sizes, line heights, and more.

Example: Custom typography variables with Sass

// Custom typography variables
$font-family-base: 'Custom Font', sans-serif;
$font-size-base: 1.125rem;
$line-height-base: 1.6;

// Import Bootstrap
@import "bootstrap";

We define custom values for the $font-family-base, $font-size-base, and $line-height-base variables before importing Bootstrap. These variables will override the default values used by Bootstrap.

By customizing typography styles, using custom fonts, and adjusting Sass variables, you can tailor Bootstrap's typography to match your project's design requirements. This allows you to create a consistent visual style throughout your website or application.