Set font-weight using Bootstrap classes

Bootstrap's text-weight utility classes

If bold is the only type of fontWeight you thought possible, shift your gears. Bootstrap has got you covered with a set of utility classes for a range of font weights. For instance, Bootstrap 4 introduced classes like .font-weight-bold, .font-weight-normal and .font-weight-light.

These classes make your job of emphasizing text easy, while ensuring the intended look and feel of Bootstrap's style consistency.

No custom classes required

When Bootstrap offers a range of utility classes, do not reinvent the wheel by creating additional custom CSS classes like .font-bold. By sticking to Bootstrap's predefined classes, you save time, and impedance mismatch in design is made negligible.

Remember the aphorism, don't fix something that isn't broken. Bootstrap's utility classes are precisely why this holds.

Beyond basic: font-weight with Bootstrap classes

The <strong> tag is your best pal for a quick bold output, but when grip on entire font weight spectrum is needed, that's when Bootstrap classes come into play. With classes like .fw-light, .fw-normal, .fw-bold, and .fw-bolder, you get the ability to manifest your desired text presentation without over-relying on a single HTML tag.

Maintaining a uniform appearance

Consistency is key in design. Using Bootstrap's predefined classes guarantees this consistency and reduces the noise that custom classes can sometimes introduce. Bootstrap's classes are created with a lot of thought and testing, ensuring an unblemished visual experience.

Custom classes: when necessary

Bootstrap's classes won't fit every single project need, and that's completely fine. In some niche cases, you may need to create custom CSS classes for certain font-weights, like so:

/* When 300 is the new normal */
.font-weight-300 {  
  font-weight: 300;
}


Just be sure to apply these custom classes when they are genuinely required:

<p class="font-weight-300">This text has its weight reduced faster than a diet plan</p>
