Clases de color de texto disponibles en Bootstrap

119

Estoy desarrollando una página de registro, poniendo texto como título en la barra de navegación. Quiero darles diferentes colores a esos textos. Para este propósito, estoy usando un archivo CSS separado, pero quiero hacer esto usando el archivo CSS de bootstrap.

¿Alguien puede enumerar las clases de colores disponibles en bootstrap?

— Fidel Castro
fuente

3

Bootstrap usa un color #333333para el color del texto.

— Bindiya Patoliya

solo usa solo esto?

— Fidel Castro

Pero puedes usar diferentes para diferentes etiquetas.

— Bindiya Patoliya

¿Pueden explicar esto o colocar el enlace si es posible?

— Fidel Castro

195

Los arranque 3 documentación listas esto bajo clases de ayuda: Muted, Primary, Success, Info, Warning, Danger.

Los arranque 4 de documentación listas esto bajo las utilidades -> color, y tiene más opciones: primary, secondary, success, danger, warning, info, light, dark, muted, white.

Para acceder a ellos se utiliza el class text-[class-name]

Entonces, si quiero texto azul, por ejemplo, haría algo como esto:

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

Esta no es una gran cantidad de opciones, pero sí algunas.

— Ted Delezene
fuente

2

Dudaría en decir si "quieres texto azul". Esa clase debe usarse cuando desee aplicar el color primario, que por defecto es azul. Pero si $primarycambia, su texto formalmente azul también cambiará. Si desea asegurarse de tener siempre texto en azul, debe configurar el texto en el tono de azul que desee.

— jacroe

7

El texto en la barra de navegación normalmente se colorea usando una de las dos siguientes clases css en el bootstrap.cssarchivo.

En primer lugar, en caso de utilizar una barra de navegación predeterminada (la gris), .navbar-defaultse utilizará la clase y el texto se coloreará en gris oscuro .

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

La otra es en caso de utilizar una barra de navegación inversa (la negra), el texto se colorea como gris60 .

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

Entonces, puedes cambiar su color como desees. Sin embargo, le recomendaría que use un archivo css separado para cambiarlo.

NOTA: también puede utilizar el personalizador proporcionado por Twitter Bootstrap, en la Navbarsección.

— lvarayut
fuente

6

Puedes usar clases de texto:

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

use clases de texto en cualquier etiqueta donde sea necesario.

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

Puede agregar sus propias clases o modificar las clases anteriores como su requisito.

— Dipendra Ghatal
fuente

0

Hay algunas clases más en Bootstrap 4 (agregadas en versiones recientes) que no se mencionan en otras respuestas.

.text-black-50y .text-white-50son 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 fragmento

— Jakub Muda
fuente