Bootstrap Text/Typography

Introduction

Typography is an essential part of web design. Bootstrap provides default styles and additional classes to enhance text appearance.

Bootstrap’s Default Settings

Bootstrap applies normalized styles to text elements, making them look consistent across browsers. By default, Bootstrap uses a font size of 14 pixels and a line height of 1.428. This applies to all paragraphs () and the element <body>. The bottom margin of every  element is equal to half of its calculated line-height (10px by default).

Bootstrap vs. Browser Defaults

Without Bootstrap, browsers apply different styles to headings and text. With Bootstrap, text remains uniform and responsive.

1. Headings `<h1>` – `<h6>`

Bootstrap provides six heading tags with predefined sizes:

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

Output:

2. Small Text ``

This is normal text and this is small text.

The  tag makes the text smaller and lighter.

3. Marked Text ``

This is highlighted text.

The  tag highlights the text with a yellow background.

4. Abbreviations `<abbr>`

<abbr title="HyperText Markup Language">HTML</abbr> is a markup language.

This adds a tooltip when users hover over the abbreviation.

5. Blockquotes `<blockquote>`

Blockquotes are used for quotations.

<blockquote>
"Bootstrap makes front-end development easier."
</blockquote>

Right-Aligned Blockquote

<blockquote class="blockquote-reverse">
"This quote is right-aligned."
</blockquote>

6. Description Lists `<dl>`

The dl element indicates a description list:

<dl>
  <dt>Peacock</dt>
  <dd>- Bird</dd>
  <dt>Elephant</dt>
  <dd>- Animal</dd>
</dl>

Output:

7. Code Formatting `<code>`

Inline code is styled using the <code> tag.

Use <code><div></code> to create a container.

8. Keyboard Input `<kbd>`

This formats keyboard inputs correctly.

Example:

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text.</p>

Output:

9. Preformatted Text `<pre>`

<pre>
function hello() {
  console.log("Hello, Bootstrap!");
}
</pre>

This maintains line breaks and indentation.

10. Contextual Colors and Backgrounds

Bootstrap provides classes for different text colors and background colors.

<p class="text-primary">Primary text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="text-warning">Warning text</p>
<p class="text-info">Info text</p>

For background colors:

<p class="bg-primary text-white">Primary background</p>
<p class="bg-success text-white">Success background</p>
<p class="bg-danger text-white">Danger background</p>
<p class="bg-warning">Warning background</p>
<p class="bg-info">Info background</p>

More Typography Classes

Bootstrap offers additional typography-related classes:

Font Weight
- Bold text
- Light text
Italic and Monospace Text
- Italic text
- Monospace text
Text Alignment
- Left-aligned text
- Centered text
- Right-aligned text

Conclusion

Bootstrap Grids and Typography make web development easier and more efficient. With Bootstrap’s flexible grid system and predefined typography styles, you can create responsive, well-structured, and visually appealing web pages. Start using Bootstrap today to build stunning and professional websites effortlessly. By learning Bootstrap, you can create modern, mobile-friendly websites with ease. Stay tuned for our next blog, where we will explore Bootstrap Tables and Bootstrap Images.

In the next blog, we will dive into Bootstrap Tables and Images, essential components that help in organizing data and displaying visuals efficiently. You will learn how to create responsive tables, apply Bootstrap’s built-in styles for better readability, and enhance table functionality using advanced features. Additionally, we will explore how Bootstrap makes handling images easier, including responsive images, image alignment, and thumbnail styling. These features will help you create more dynamic and visually appealing web pages. Stay tuned for more insights and practical examples to elevate your Bootstrap skills!

Request more information

Bootstrap Text/Typography