157

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.

Ionică Bizău
  • 109,027
  • 88
  • 289
  • 474

10 Answers10

100

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>
Stacked
  • 6,892
  • 7
  • 57
  • 73
Brett Merrifield
  • 2,220
  • 6
  • 22
  • 21
  • 4
    Furthermore `strong` doesn't mean bold necessarily. From https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong: "Typically this element is rendered by default using a bold font weight. However, it should not be used simply to apply bold styling; use the CSS font-weight property for that purpose." –  Apr 10 '18 at 07:44
  • 1
    Strong is strong, bold is bold :( The answer by @GurgenHakobyan should be far preferred. – MattAllegro Aug 31 '18 at 13:31
  • This is from the old days where there was no CSS. Due to the separation of concerns design pattern, CSS was invented to avoid mixing content and presentation both in HTML. Although web browsers still support this for backward compatibility, it is strongly advised to not use and , and etc. https://en.wikipedia.org/wiki/Cascading_Style_Sheets – Wildhammer Mar 05 '20 at 17:48
93

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.

Ilshidur
  • 1,461
  • 14
  • 11
  • Oh, that's cute! Can you improve your answer to mention that this is going to happen in Bootstrap 4, and add a solution for current versions (either using `` and just creating your own class)? I'm going to mark your answer then. – Ionică Bizău Sep 19 '16 at 19:33
  • Also (in Bootstrap 4) you can add the suggested class ("font-weight-bold") to the `` boxes and the text inside will turn bold. We use this with Title fields in order to emphasize them when necessary. Tested in Windows x64 in Chrome ver76 and IE11. – timmi4sa Sep 08 '19 at 19:36
  • Cool, cool man. It works!!! i did try to make the content bold by adding the style manually to css file but it just did not happen. Then I found your answer :D – Travis Le Oct 07 '19 at 10:31
  • There is no `text-weight-italic` in that pull request. In Bootstrap, there is `text-italic`. This class sets the css property `font-style` rather than `font-weight` and can be used alongside any of the font-weight-properties. – R. Schreurs Feb 02 '21 at 17:22
  • Shouldn't that be "**font**-weight-normal" and not "**text**-weight-normal"? – Daz Feb 03 '22 at 17:04
  • @Daz You're right. I fixed it. – Ilshidur Feb 04 '22 at 09:01
54

In Bootstrap 4:

class="font-weight-bold"

Or:

<strong>text</strong>
Jeremy Lynch
  • 6,780
  • 3
  • 52
  • 63
49

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;
}
Spikolynn
  • 4,067
  • 2
  • 37
  • 44
Gurgen Hakobyan
  • 951
  • 10
  • 13
  • 8
    I would advise against this, markup is supposed to be semantic, like this: .some-functional-description-of-the-element { font-weight:bold }. Rather than just using a class named like a bit of css, just use style="font-weight:bold;", it's more honest about being quick n dirty. – cmc Aug 18 '15 at 11:45
  • 24
    This is a perfect solution and just as semantic as many other Bootstrap classes like .text-uppercase or .list-unstyled. Inline styles can become a management nightmare, for example if you later decide that all bold elements should be a different color or have a text effect. Having a class makes this easier and this is the best answer. – Andy Mehalick Sep 15 '15 at 10:45
  • I agree with Andy here. This answers the question correctly. There are valid use cases when using generalized classes would provide the cleanest html output, where generators, toolkits & templates are in use. – dperish Feb 15 '16 at 20:10
  • This is the right solution for bootstrap < 4. The purpose of `strong` [is not to make text bold](https://www.w3.org/TR/html5/text-level-semantics.html#the-strong-element), browsers do it because convention is bold text with strong emphasis. HTML tag must have semantic meaning, not just exists for design purposes. In fact it isn't cited in W3 recommendation, and even `b` [shouldn't be relied to be bold](https://www.w3.org/TR/html5/text-level-semantics.html#the-b-element). – Andre Figueiredo Oct 06 '17 at 20:43
  • 1
    This is outdated in bootstrap 4 – toddmo Apr 16 '18 at 20:34
14

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>
danramzdev
  • 149
  • 1
  • 3
10

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>
st35ly
  • 1,215
  • 18
  • 24
4

For Bootstrap 5:

class="fw-bold"

For Bootstrap 4

class="font-weight-bold"
Fábio Rodrigues Fonseca
  • 1,148
  • 8
  • 8
1

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.

maioman
  • 18,154
  • 4
  • 36
  • 42
1

On Bootstrap 4 and 5 you can use:

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>

https://getbootstrap.com/docs/5.0/utilities/text/

Archie
  • 21
  • 3
0

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

try this

* {-webkit-font-smoothing: antialiased;}
Lahiru Pinto
  • 1,621
  • 19
  • 20