Set font-weight using Bootstrap classes

HtmlCssTwitter BootstrapTwitter Bootstrap-3

Html Problem Overview


Is there any Twitter Bootstrap class for font-weight: bold and other values of font-weight?

I would not create a new one if this already exists in Bootstrap.

Html Solutions


Solution 1 - Html

I found this on the Bootstrap website, but it really isn't a Bootstrap class, it's just HTML.

<strong>rendered as bold text</strong>

Solution 2 - Html

In Bootstrap 4, class="font-weight-bold" is what you are looking for.

For other styles, there is font-weight-normal and font-italic classes.

Solution 3 - Html

In Bootstrap 4:

class="font-weight-bold"

Or:

<strong>text</strong>

Solution 4 - Html

Create in your Site.css (or in another place) a new class named for example .font-bold and set it to your element

.font-bold {
  font-weight: bold;
}

Solution 5 - Html

On Bootstrap 4 you can use:

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>

Solution 6 - Html

The most accurate way of how to do it if using Boostrap 5 is as in example below:

<p class="fw-bold">Bold text.</p>

Solution 7 - Html

You should use bootstarp's variables to control your font-weight if you want a more customized value and/or you're following a scheme that needs to be repeated ; Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks;

you can find all the documentation at http://getbootstrap.com/css.

Solution 8 - Html

If you are checking this in Mac Version of Chrome, i think there is some browser incompatibility.

try this

* {-webkit-font-smoothing: antialiased;}

Solution 9 - Html

For Bootstrap 5:

class="fw-bold"

For Bootstrap 4

class="font-weight-bold"

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionIonică BizăuView Question on Stackoverflow
Solution 1 - HtmlBrett MerrifieldView Answer on Stackoverflow
Solution 2 - HtmlIlshidurView Answer on Stackoverflow
Solution 3 - HtmlJeremy LynchView Answer on Stackoverflow
Solution 4 - HtmlGurgen HakobyanView Answer on Stackoverflow
Solution 5 - HtmldanramzdevView Answer on Stackoverflow
Solution 6 - Htmlst35lyView Answer on Stackoverflow
Solution 7 - HtmlmaiomanView Answer on Stackoverflow
Solution 8 - HtmlLahiru PintoView Answer on Stackoverflow
Solution 9 - HtmlFábio Rodrigues FonsecaView Answer on Stackoverflow