Bootstrap Text Colors

Bootstrap 4 contextual text-color utilities help communicate state and contrast.

Text Color Utilities Top ↑

<p class="text-primary">Primary</p>
<p class="text-secondary">Secondary</p>
<p class="text-success">Success</p>
<p class="text-danger">Danger</p>
<p class="text-warning">Warning</p>
<p class="text-info">Info</p>
<p class="text-light bg-dark">Light</p>
<p class="text-dark">Dark</p>
<p class="text-muted">Muted</p>

Change Text Color with jQuery Top ↑

const textClasses =
    "text-primary text-secondary text-success text-danger text-warning text-info text-light text-dark text-muted";

$( "#message" )
    .removeClass( textClasses )
    .addClass( "text-danger" );

Custom Color Top ↑

$( "#message" ).css(
    "color",
    "#663399"
);

Original Source Examples Retained for Migration Reference Top ↑

Original example 1

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Original example 2

<h3 class="text-danger">This text is class='text-danger'</h3>

Original example 3

<style>
.my_text-class {
  color: #f00000;
}
</style>

Original example 4

<p class="my_text-class">This text is class='my_text-class'</p>

Original example 5

<style>\n";
str +=".my_text-class {\n";
str +=" color: "+val+";\n"
str +="}\n"
str +="</style>

Original example 6

var presentClassName = $('#d1').attr('class');

Original example 7

$('#d1').removeClass('text-warning').addClass( 'text-info' );

Original example 8

var presentClassName = $('#d1').attr('class');
$('#d1').removeClass( presentClassName).addClass( "text-success" );

Additional Original Learning Routes Top ↑

• bs-background-colour.php
• msg-demo/bs-font-colour.php

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: