Background Colour class using Bootstrap

This Background is class='bg-primary' Hex : '#337ab7'

This Background is class='bg-success' Hex : '#c1e2b3'

This Background is class='bg-info' Hex : '#d9edf7'

This Background is class='bg-warning' Hex : '#f7ecb5'

This Background is class='bg-danger' Hex : '#f2dede'

<p class='bg-primary'>This Background is class='bg-primary' Hex : '#337ab7'</p>
<p class='bg-success'>This Background is class='bg-success' Hex : '#c1e2b3'</p>
<p class='bg-info'>This Background is class='bg-info' Hex : '#d9edf7'</p>
<p class='bg-warning'>This Background is class='bg-warning' Hex : '#f7ecb5'</p>
<p class='bg-danger'>This Background is class='bg-danger' Hex : '#f2dede'</p>

Different size with colour. by using <h3>

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

This background is class='bg-danger'

To add left padding by declaring style
.hdd{padding-left: 0.3cm;}
You can add this by
class='bg-warning text-dark hdd'

Change to your own background colour

Above classes with five 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_bg-class {
  background-color: #f00000;
}
</style>
<p class="my_bg-class">This background is class='my_bg-class'</p>
Output is here

This background is class='my_bg-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 bg classes from Div

We often use the same Div box to communicate different type of messages. Based on the requirement ( or condition ) we can change the class associated with the DIV or P 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('bg-warning').addClass( 'bg-info' );
Removing present class and adding a new class.
var presentClassName = $('#d1').attr('class');
$('#d1').removeClass( presentClassName).addClass( "bg-success" );
Here is a DEMO script to apply all classes to one DIV tag by using different buttons.

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com



    Post your comments , suggestion , error , requirements etc here .







    Most Popular JQuery Scripts

    1

    Two dependant list boxes

    2

    Calendar with Date Selection

    3

    Data change by Slider

    4

    Show & Hide element


    JQuery Video Tutorials




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer