Bootstrap Utility API Guide: Font Size

What this Bootstrap Utility API class does

Set the CSS font-size property of an element. The CSS font-size property is used to set the size of the text within an element. It specifies the size of the font in either relative or absolute terms.

The font-size property can be set using various units such as pixels, ems, rems, percentages, and more. When a pixel value is used, the font size is set to a specific size in pixels, while other units such as ems or rems are relative to the font size of the parent element or the root element, respectively.

Using relative units like ems or rems allows the font size to adjust according to the user's preferences or the size of the browser window. For example, if the font size of the root element is set to 16 pixels and a child element's font size is set to 1.5 ems, the child element's font size will be 24 pixels (1.5 * 16 pixels).

The values for this utility are taken from the Bootstrap SASS map $font-sizes.

Example usage & available classes

<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>

Example override

In the example override below, we are adding the additional class of "fs-7" with a value of "3rem". Note that a better approach to amending font size options would be to amend the Bootstrap SASS map $font-sizes.

"font-size": map-merge(
    map-get($utilities, "font-size"),
    (
        values: map-merge(
            map-get(map-get($utilities, "font-size"), "values"), (
                7: 3rem
            ) 
        )
    )
)

More Bootstrap utilities

More Frontend Developer Resources

Web Development Courses

  • Build professional projects for your portfolio Build professional projects for your portfolio
  • Master CSS, HTML and JavaScript Master CSS, HTML and JavaScript
  • Learn to use popular frontend frameworks and libraries such as Vue.js, React.js, Bootstrap and Tailwind CSS Learn to use popular frontend frameworks and libraries such as Vue.js, React.js, Bootstrap and Tailwind CSS
View Courses

Web Development Quizzes

  • Flexible study option that you can access anytime Flexible study option that you can access anytime
  • Helps you identify areas that need improvement. Helps you identify areas that need improvement.
  • Topics such as HTML, CSS, JavaScript, responsive design, accessibility, and more Topics such as HTML, CSS, JavaScript, responsive design, accessibility, and more
View Quizzes

Web Development Flashcards

  • Helps you stay organized and focused while learning Helps you stay organized and focused while learning
  • Engaging way to learn frontend web development on-the-go Engaging way to learn frontend web development on-the-go
  • Perfect for reinforcing your knowledge of key concepts, terminology, and best practices Perfect for reinforcing your knowledge of key concepts, terminology, and best practices
View Flashcards

Frontend Developer Challenges

  • Suitable for frontend web developers of all levels Suitable for frontend web developers of all levels
  • Encourages you to think outside the box Encourages you to think outside the box
  • A great way to practice and apply your knowledge in a real-world context A great way to practice and apply your knowledge in a real-world context
View Challenges

Free Website Templates

  • Saves you time and effort by providing ready-to-use templates Saves you time and effort by providing ready-to-use templates
  • Strong foundation for building your own custom websites Strong foundation for building your own custom websites
  • Perfect for learners who want to experiment with different designs and layouts Perfect for learners who want to experiment with different designs and layouts
View Free Templates

Frontend HTML Snippets

  • Saves you time and effort by providing ready-to-use code Saves you time and effort by providing ready-to-use code
  • Wide range of components, such as navbar, carousel, modal, and more Wide range of components, such as navbar, carousel, modal, and more
  • Library of HTML code snippets to streamline your frontend web development workflow Library of HTML code snippets to streamline your frontend web development workflow
View Snippets

Frontend Tech Terminology

  • Suitable for learners of all levels Suitable for learners of all levels
  • Comprehensive glossary of frontend web development terms Comprehensive glossary of frontend web development terms
  • Covers key concepts and terminology related to HTML, CSS, JavaScript, responsive design, accessibility, and more Covers key concepts and terminology related to HTML, CSS, JavaScript, responsive design, accessibility, and more
View Terms