Bootstrap - Typography

Headings

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.

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

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

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

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

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

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

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

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

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

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

<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

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.

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

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

<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>
</blockquote>

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.

<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>
</blockquote>

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.

<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>
</blockquote>

Lists

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.

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

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

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

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.

<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>
</ul>

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-*.

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

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

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

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.

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

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

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 class="pre-scrollable"><code>// Long code block
function longFunction() {
  // ...
  // ...
  // ...
}
</code></pre>

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.

<pre>
  _____
 /     \
| () () |
 \  ^  /
  '---'
</pre>

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:

<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.
</p>

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.

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

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

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.

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

  h1 {
    font-size: 36px;
    color: #333;
  }
</style>

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.

<head>
  <link href="https://fonts.googleapis.com/css?family=Custom+Font" rel="stylesheet">
  <style>
    body {
      font-family: 'Custom Font', sans-serif;
    }
  </style>
</head>

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.

// 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.