Classes de cores de texto disponíveis no Bootstrap

119

Estou desenvolvendo uma página de inscrição, colocando algum texto como título na barra de navegação. Quero dar a esses textos cores diferentes. Para esse fim, estou usando um arquivo CSS separado, mas quero fazer isso usando o arquivo CSS do bootstrap.

Alguém pode listar as classes de cores disponíveis no bootstrap?

css twitter-bootstrap twitter-bootstrap-3 bootstrap-4 Fidel Castro
fonte
3
O Bootstrap usa uma cor #333333para a cor do texto.
Bindiya Patoliya
sozinho usa apenas isso?
Fidel
Mas você pode usar diferentes para diferentes tags.
Bindiya Patoliya
u por favor pode explicar isso ou colocar o link, se possível
fidel castro

Respostas:

195

Os inicialização 3 de documentação listas isso sob classes auxiliares: Muted, Primary, Success, Info, Warning,Danger .

Os inicialização 4 documentação listas isso sob utilitários -> cor e tem mais opções: primary, secondary, success, danger, warning, info, light, dark, muted, white.

Para acessá-los, utiliza-se o class text-[class-name]

Então, se eu quiser texto azul, por exemplo, faria algo assim:

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

Este não é um grande número de opções, mas são algumas.

Ted Delezene
fonte
2
Eu hesitaria em dizer se você "deseja texto azul". Essa classe deve ser usada quando você deseja aplicar a cor primária, que por padrão é azul. Mas se $primarymudar, seu texto formalmente azul também mudará. Se você quiser ter sempre texto em azul, defina o texto para qualquer tom de azul que desejar.
jacroe
7

O texto na barra de navegação normalmente é colorido usando uma das duas classes css a seguir no bootstrap.cssarquivo.

Primeiro, no caso de usar uma barra de navegação padrão (a cinza), a .navbar-defaultclasse será usada e o texto será colorido em cinza escuro .

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

A outra, no caso de usar uma barra de navegação inversa (a preta), o texto é colorido em cinza60 .

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

Então, você pode mudar a cor como desejar. No entanto, eu recomendo que você use um arquivo css separado para alterá-lo.

NOTA: você também pode usar o personalizador fornecido por Twitter Bootstrap, na Navbarseção

lvarayut
fonte
6

Você pode usar classes de texto:

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

use classes de texto em qualquer tag, quando necessário.

<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>

Você pode adicionar suas próprias classes ou modificar as classes acima como sua exigência.

Dipendra Ghatal
fonte
0

Existem poucas classes no Bootstrap 4 (adicionadas nas versões recentes) não mencionadas em outras respostas.

.text-black-50e .text-white-50são 50% transparentes.

.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>
Expandir snippet

Jakub Muda
fonte