What Is Bootstrap 5 Font Weight Utilities?
Bootstrap 5 font weight utilities are classes that set the font-weight of text without custom CSS: .fw-bold (700), .fw-semibold (600), .fw-medium (500), .fw-normal (400) and .fw-light (300), plus .fw-bolder and .fw-lighter, which are relative to the parent element. They are used to create emphasis and hierarchy in headings, labels, prices and body text.
What Are Bootstrap 5 Font Weight Utilities?
Font weight describes how thick the strokes of a typeface are, on a CSS scale from 100 (thin) to 900 (black), with 400 as normal and 700 as bold. Bootstrap 5 exposes the most useful points on that scale as .fw-* classes. In Bootstrap 4 the equivalent classes were longer (.font-weight-bold, .font-weight-light), and Bootstrap 5.0 shortened them to .fw-bold and its siblings. .fw-semibold arrived in version 5.2 and .fw-medium in version 5.3, so check which Bootstrap version a project uses before relying on them. The related .fst-italic and .fst-normal classes control font style. By default Bootstrap sets headings (h1 to h6) to weight 500, body text to 400, and .lead paragraphs and display headings to 300, so the utilities are mostly used to move individual elements away from those defaults.
How Bootstrap 5 Font Weight Utilities Work
Each class sets font-weight with !important, using values from Bootstrap's Sass variables: $font-weight-light (300), $font-weight-normal (400), $font-weight-medium (500), $font-weight-semibold (600) and $font-weight-bold (700). .fw-bolder and .fw-lighter use the CSS keywords bolder and lighter, which pick a weight heavier or lighter than the parent's, so .fw-bolder inside normal text gives bold, and inside bold text gives an even heavier weight if the font has one. Bootstrap's Reboot also sets <b> and <strong> to font-weight: bolder. The key detail is that a class can only display weights the font actually provides. With Bootstrap's default system font stack, most operating systems include several weights. With a web font, only the weights you load are available: if you load a Google Font at 400 and 700 only, .fw-semibold falls back to the nearest available weight and .fw-light may look identical to normal, and if no bold face is loaded at all, the browser may create a synthetic "faux bold" that looks smeared. Variable fonts avoid this because one file covers a continuous range of weights. The classes are not responsive by default, so there is no .fw-md-bold, although the utilities API can generate one if needed.
Best Practices for Bootstrap 5 Font Weight Utilities
Load only the weights you use, and use only the weights you load. Decide on a small set, typically regular for body text, medium or semibold for subheadings and labels, and bold for key emphasis, and request exactly those from your web font provider, because each extra weight is another file to download. Build hierarchy with a combination of size, weight and colour rather than weight alone; a page where every other phrase is bold has no emphasis left. Use semantic elements when the emphasis carries meaning: <strong> marks important text for screen readers and search engines, while .fw-bold is purely visual and suits things like prices, table totals or card titles that are styled rather than stressed. Be careful with .fw-light on small or low-contrast text, because thin strokes become hard to read, especially on low-resolution screens and in light grey; keep light weights for large display text. When the same weight change repeats across a component, set it once in CSS or with Sass variables such as $headings-font-weight rather than adding the class to every element. Finally, check the result with the real font on Windows, macOS, iOS and Android, since system fonts differ between platforms and a weight that looks right on one can look too heavy or too thin on another.
Bootstrap 5 Font Weight Utilities and Canvas Builder
Canvas Builder outputs Bootstrap 5 HTML, so font weights in generated pages can be adjusted with the standard .fw-* classes, or globally through the heading and body styles in the exported CSS. When you change a site's fonts, check that the weights used in the markup are ones the font actually loads, particularly semibold and light, so headings and labels render as intended.
Frequently asked questions
How do I make text bold in Bootstrap 5?
Add .fw-bold to the element, for example <span class="fw-bold">, which sets font-weight: 700. If the text is important in meaning, not just appearance, use the <strong> element instead, which Bootstrap also renders in a heavier weight. For weights between normal and bold, use .fw-semibold or .fw-medium.
What is the difference between fw-bold and fw-bolder?
.fw-bold always sets a fixed weight of 700. .fw-bolder uses the CSS keyword bolder, which is heavier than the parent element's weight, so the result depends on the context and on which weights the font includes.
Why does fw-semibold look the same as fw-bold?
The font probably does not include a 600 weight, so the browser uses the nearest available weight, which is often 700. Load the 600 weight of your web font, or use a variable font, to see a true semibold.
Can I change the weight values Bootstrap uses?
Yes. Override Sass variables such as $font-weight-bold, $font-weight-semibold or $headings-font-weight before importing Bootstrap, then recompile. Without Sass, write your own CSS rules, keeping in mind that the utility classes use !important.