Set font-weight using Bootstrap classes
HtmlCssTwitter BootstrapTwitter Bootstrap-3Html 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"