Classes de couleurs de texte disponibles dans Bootstrap

119

Je développe une page d'inscription, en mettant du texte comme titre dans la barre de navigation. Je veux donner à ces textes des couleurs différentes. Pour cela, j'utilise un fichier CSS séparé, mais je veux le faire en utilisant le fichier CSS de bootstrap.

Quelqu'un peut-il lister les classes de couleurs disponibles dans bootstrap?

css twitter-bootstrap twitter-bootstrap-3 bootstrap-4 Fidel Castro
la source
3
Bootstrap utilise une couleur #333333pour la couleur du texte.
Bindiya Patoliya
il seul utilise seulement cela?
fidel castro
Mais vous pouvez utiliser différents pour différentes balises.
Bindiya Patoliya
pouvez-vous s'il vous plaît expliquer cela ou placer le lien si possible
fidel castro

Réponses:

195

Les bootstrap 3 documentation listes sous cette classes d'aide: Muted, Primary, Success, Info, Warning, Danger.

Les bootstrap 4 documentation listes sous ce utilitaires -> la couleur, et a plus d' options: primary, secondary, success, danger, warning, info, light, dark, muted, white.

Pour y accéder on utilise le class text-[class-name]

Donc, si je veux du texte bleu par exemple, je ferais quelque chose comme ceci:

<p class="text-primary">This text is the blue primary color.</p>

Ce n'est pas un grand nombre de choix, mais c'est certains.

Ted Delezene
la source
2
J'hésiterais à dire si vous "voulez du texte bleu". Cette classe doit être utilisée lorsque vous souhaitez appliquer la couleur principale, qui par défaut est le bleu. Mais en cas de $primarychangement, votre texte formellement bleu changerait également. Si vous voulez vous assurer que vous avez toujours du texte bleu, vous devez définir le texte sur la nuance de bleu que vous souhaitez qu'il soit.
jacroe
7

Le texte de la barre de navigation est normalement coloré en utilisant l'une des deux classes css suivantes dans le bootstrap.cssfichier.

Premièrement, en cas d'utilisation d'une barre de navigation par défaut (la grise), la .navbar-defaultclasse sera utilisée et le texte sera coloré en gris foncé .

.navbar-default .navbar-text {
  color: #777;
}

L'autre est en cas d'utilisation d'une barre de navigation inversée (la noire), le texte est coloré en gris60 .

.navbar-inverse .navbar-text {
  color: #999;
}

Ainsi, vous pouvez changer sa couleur à votre guise. Cependant, je vous recommande d'utiliser un fichier css séparé pour le modifier.

REMARQUE: vous pouvez également utiliser le personnalisateur fourni par Twitter Bootstrap, dans la Navbarsection.

lvarayut
la source
6

Vous pouvez utiliser des classes de texte:

.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-muted
.text-white

utilisez des classes de texte dans n'importe quelle balise si nécessaire.

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>

Vous pouvez ajouter vos propres classes ou modifier les classes ci-dessus selon vos besoins.

Dipendra Ghatal
la source
0

Il y a peu plus de classes dans Bootstrap 4 (ajoutées dans les versions récentes) non mentionnées dans d'autres réponses.

.text-black-50et .text-white-50sont transparents à 50%.

.text-body {
  color: #212529 !important;
}

.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

/*DEMO*/
p{padding:.5rem}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<p class="text-body">.text-body</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
Développer l'extrait

Jakub Muda
la source