Demo of different text classes

Primary! This is text-primary class, you can change by using buttons below.

Muted Primary success Info warning Danger

• ←Bootstrap text colour Tutorial
• Alert with different Class→

HTML

<h3 class="text-primary" id='d1'>
  <strong>Primary!</strong> This is text-primary class, you can change by using buttons below.
</h3>
<br><br>
<button type='button' class='btn' id='b_muted'>Muted</button>
<button type='button' class='btn btn-primary' id='b_primary'>Primary</button>
<button type='button' class='btn btn-success' id='b_success'>success</button>
<button type='button' class='btn btn-info' id='b_info'>Info</button>
<button type='button' class='btn btn-warning' id='b_warning'>warning</button>
<button type='button' class='btn btn-danger' id='b_danger'>Danger</button>

JQUERY

<script>
$(document).ready(function() {
//////////////////////////
$('#b_muted').click(function(){
var presentClassName = $('#d1').attr('class');
$('#d1').removeClass(presentClassName).addClass( "text-muted" );
$('#d1').html('<strong>Primary!</strong> This is text-muted class');
})
//////////////////////////
$('#b_primary').click(function(){
var presentClassName = $('#d1').attr('class');
$('#d1').removeClass(presentClassName).addClass( "text-primary" );
$('#d1').html('<strong>Primary!</strong> This is text-primary class');
})
//////////////////////////
$('#b_warning').click(function(){
var presentClassName = $('#d1').attr('class');
$('#d1').removeClass(presentClassName).addClass( "text-warning" );
$('#d1').html('<strong>Warning!</strong> This is text-Warning class');
})
///////////////////
$('#b_info').click(function(){
var presentClassName = $('#d1').attr('class');
$('#d1').removeClass( presentClassName).addClass( "text-info" );
$('#d1').html('<strong>Info!</strong> This is text-Info class');
})
///////////////////
$('#b_success').click(function(){
var presentClassName = $('#d1').attr('class');
$('#d1').removeClass( presentClassName).addClass( "text-success" );
$('#d1').html('<strong>Success!</strong> This is text-success class');
})
///////////////////
$('#b_danger').click(function(){
var presentClassName = $('#d1').attr('class');
$('#d1').removeClass( presentClassName).addClass( "text-danger" );
$('#d1').html('<strong>Danger!</strong> This is text-Danger class');
})
///////////////////
})
</script>