Définir l'épaisseur de la police à l'aide des classes Bootstrap

129

Existe-t-il une classe Twitter Bootstrap pour font-weight: boldet d'autres valeurs defont-weight ?

Je ne créerais pas de nouveau si cela existe déjà dans Bootstrap.

html css twitter-bootstrap twitter-bootstrap-3 Ionică Bizău
la source
5
Il n'y a pas de classe, vous devez personnaliser votre propre.
Manoz
2
oui il n'y a pas de classe séparée pour Font-weight: bold
Dinesh Kanivu

Réponses:

54

EDIT 2 (final): Selon la documentation de bootstrap 4 , class="font-weight-bold"c'est ce que vous recherchez.

EDIT: Vous pouvez utiliser class="font-weight-bold"comme indiqué ici (Bootstrap 4 alpha).

J'ai conservé la réponse originale ci-dessous à des fins de clarté.

Je poste cette réponse parce que ce fil semble avoir beaucoup de visiteurs, mais il n'avait pas de solution appropriée pour résoudre ce problème. Mais il y aura bientôt un moyen avec Bootstrap 4:

Comme le montre cette requête d'extraction GitHub , il vous suffira d'utiliser les classes text-weight-normal, text-weight-boldet text-weight-italic.

Cela peut peut-être changer jusqu'à la version stable officielle. A cette date de rédaction, cette pull request n'est pas encore fusionnée dans la branche alpha.

Je mettrai à jour cet article une fois que Bootstrap v4 sera publié.

Ilshidur
la source
Oh c'est mignon! Pouvez-vous améliorer votre réponse pour mentionner que cela va se produire dans Bootstrap 4 et ajouter une solution pour les versions actuelles (en utilisant <strong>et en créant simplement votre propre classe)? Je vais alors marquer votre réponse.
Ionică Bizău
De plus (dans Bootstrap 4) vous pouvez ajouter la classe suggérée ("font-weight-bold") aux <input/>cases et le texte à l'intérieur deviendra gras. Nous l'utilisons avec les champs Titre afin de les mettre en valeur si nécessaire. Testé sous Windows x64 dans Chrome ver76 et IE11.
timmi4sa
Cool, cool man. Ça marche!!! J'ai essayé de rendre le contenu en gras en ajoutant le style manuellement au fichier css, mais cela ne s'est tout simplement pas produit. Ensuite, j'ai trouvé votre réponse: D
Travis Le
93

J'ai trouvé cela sur le site Web Bootstrap , mais ce n'est vraiment pas une classe Bootstrap, c'est juste du HTML.

<strong>rendered as bold text</strong>
Brett Merrifield
la source
3
En outre, strongcela ne signifie pas nécessairement gras. De developer.mozilla.org/en-US/docs/Web/HTML/Element/strong : "En général, cet élément est rendu par défaut en utilisant un poids de police gras. Cependant, il ne doit pas être utilisé simplement pour appliquer un style gras; utilisez le Propriété CSS font-weight à cet effet. "
Strong is strong, bold is bold: (La réponse de @GurgenHakobyan devrait être de loin préférée.
MattAllegro
C'est du bon vieux temps où il n'y avait pas de CSS. En raison de la séparation des motifs de conception des préoccupations, CSS a été inventé pour éviter de mélanger le contenu et la présentation à la fois en HTML. Bien que les navigateurs Web prennent toujours en charge cela pour la compatibilité descendante, il est fortement conseillé de ne pas utiliser <b> et <strong>, <i> et <em> etc. en.wikipedia.org/wiki/Cascading_Style_Sheets
Wildhammer
49

Dans Bootstrap 4 :

class="font-weight-bold"

Ou:

<strong>text</strong>
Jeremy Lynch
la source
39

Créez dans votre Site.css (ou à un autre endroit) une nouvelle classe nommée par exemple .font-bold et définissez-la sur votre élément

.font-bold {
  font-weight: bold;
}
Gurgen Hakobyan
la source
8
Je déconseillerais cela, le balisage est censé être sémantique, comme ceci: .some-fonctionnelle-description-of-the-element {font-weight: bold}. Plutôt que d'utiliser simplement une classe nommée comme un peu de css, utilisez simplement style = "font-weight: bold;", il est plus honnête d'être rapide et sale.
cmc
23
C'est une solution parfaite et tout aussi sémantique que de nombreuses autres classes Bootstrap comme .text-uppercase ou .list-unstyled. Les styles en ligne peuvent devenir un cauchemar de gestion, par exemple si vous décidez plus tard que tous les éléments en gras doivent être d'une couleur différente ou avoir un effet de texte. Avoir un cours facilite les choses et c'est la meilleure réponse.
Andy Mehalick
Je suis d'accord avec Andy ici. Cela répond correctement à la question. Il existe des cas d'utilisation valides où l'utilisation de classes généralisées fournirait la sortie html la plus propre, là où des générateurs, des boîtes à outils et des modèles sont utilisés.
dperish le
C'est la bonne solution pour bootstrap <4. Le but de strong n'est pas de mettre du texte en gras , les navigateurs le font car la convention est un texte en gras avec une forte emphase. La balise HTML doit avoir une signification sémantique, pas seulement à des fins de conception. En fait, il n'est pas cité dans la recommandation W3 et ne b doit même pas être considéré comme audacieux .
Andre Figueiredo
1
Ceci est obsolète dans bootstrap 4
toddmo
8

Sur Bootstrap 4, vous pouvez utiliser:

<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
la source
2

Vous devriez utiliser les variables de bootstarp pour contrôler votre poids de police si vous voulez une valeur plus personnalisée et / ou si vous suivez un schéma qui doit être répété; Les variables sont utilisées dans tout le projet comme un moyen de centraliser et de partager les valeurs couramment utilisées comme les couleurs, l'espacement ou les piles de polices;

vous pouvez trouver toute la documentation sur http://getbootstrap.com/css .

Maioman
la source