Font Color class using Bootstrap

This text is class='text-muted'

This text is class='text-primary'

This text is class='text-success'

This text is class='text-info'

This text is class='text-warning'

This text is class='text-danger'

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

Different size with colour. by using <h3>

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

This text is class='text-danger'

Change to your own colour font

Above classes with six different colours are available by default. We can create our own class with our selected colour and add use them. Let us create own style property like this.
<style>
.my_text-class {
  color: #f00000;
}
</style>
<p class="my_text-class">This text is class='my_text-class'</p>
Output is here

This text is class='my_text-class'

Where to keep this style code

You can define your own style property page and inside this page you can keep your all common style code for your site.

Generate CSS code

Select your favorite color:
Your CSS code will appear here after colour selection.

Reading adding and removing text classes

Based on the requirement ( or condition ) we can change the text class associated with the DIV or P tag or H tag.
Here d1 is the id of our alert message box.

Reading the present associated class
var presentClassName = $('#d1').attr('class');
Removing one class and adding another.
$('#d1').removeClass('text-warning').addClass( 'text-info' );
Removing present class and adding a new class.
var presentClassName = $('#d1').attr('class');
$('#d1').removeClass( presentClassName).addClass( "text-success" );
Here is a DEMO script to apply all text classes by using different buttons.
Visitors Rating
Your Rating




Google+

Post Comment This is for short comments only. Use the forum for more discussions.







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2018 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer