"colors CSS "
Bootstrap 3.3.0 Snippet by jeevan123456

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Logo Nav - Start Bootstrap Template</title> <!-- Bootstrap Core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Custom CSS --> <link href="css/custom.css" rel="stylesheet"> <link href="css/colors.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <style> </style> </head> <body> <div class= "container"> <div class="row"> <div class="col-sm-4"> <div class="p bg-red-1">.bg-red-1</div> <div class="p bg-red-2">.bg-red-2</div> <div class="p bg-red-3">.bg-red-3</div> <div class="p bg-red-4">.bg-red-4</div> <div class="p bg-red-5">.bg-red-5</div> <div class="p bg-red-6">.bg-red-6</div> <div class="p bg-red-7">.bg-red-7</div> <div class="p bg-red-8">.bg-red-8</div> <div class="p bg-red-9">.bg-red-9</div> <div class="p bg-red-10">.bg-red-10</div> <div class="p bg-red-11">.bg-red-11</div> <div class="p bg-red-12">.bg-red-12</div> <div class="p bg-red-13">.bg-red-13</div> <div class="p bg-red-14">.bg-red-14</div> <div class="p bg-red-15">.bg-red-15</div> <div class="p bg-red-16">.bg-red-16</div> <div class="p bg-red-17">.bg-red-17</div> <div class="p bg-red-18">.bg-red-18</div> <div class="p bg-red-19">.bg-red-19</div> </div> <div class="col-sm-4"> <div class="p bg-grey-1">.bg-grey-1</div> <div class="p bg-grey-2">.bg-grey-2</div> <div class="p bg-grey-3">.bg-grey-3</div> <div class="p bg-grey-4">.bg-grey-4</div> <div class="p bg-grey-5">.bg-grey-5</div> <div class="p bg-grey-6">.bg-grey-6</div> <div class="p bg-grey-7">.bg-grey-7</div> <div class="p bg-grey-8">.bg-grey-8</div> <div class="p bg-grey-9">.bg-grey-9</div> <div class="p bg-grey-10">.bg-grey-10</div> <div class="p bg-grey-11">.bg-grey-11</div> <div class="p bg-grey-12">.bg-grey-12</div> <div class="p bg-grey-13">.bg-grey-13</div> <div class="p bg-grey-14">.bg-grey-14</div> <div class="p bg-grey-15">.bg-grey-15</div> <div class="p bg-grey-16">.bg-grey-16</div> <div class="p bg-grey-17">.bg-grey-17</div> <div class="p bg-grey-18">.bg-grey-18</div> <div class="p bg-grey-19">.bg-grey-19</div> </div> <div class="col-sm-4"> <div class="p bg-light-grey-1">.bg-light-grey-1</div> <div class="p bg-light-grey-2">.bg-light-grey-2</div> <div class="p bg-light-grey-3">.bg-light-grey-3</div> <div class="p bg-light-grey-4">.bg-light-grey-4</div> <div class="p bg-light-grey-5">.bg-light-grey-5</div> <div class="p bg-light-grey-6">.bg-light-grey-6</div> <div class="p bg-light-grey-7">.bg-light-grey-7</div> <div class="p bg-light-grey-8">.bg-light-grey-8</div> <div class="p bg-light-grey-9">.bg-light-grey-9</div> <div class="p bg-light-grey-10">.bg-light-grey-10</div> <div class="p bg-light-grey-11">.bg-light-grey-11</div> <div class="p bg-light-grey-12">.bg-light-grey-12</div> <div class="p bg-light-grey-13">.bg-light-grey-13</div> <div class="p bg-light-grey-14">.bg-light-grey-14</div> <div class="p bg-light-grey-15">.bg-light-grey-15</div> <div class="p bg-light-grey-16">.bg-light-grey-16</div> <div class="p bg-light-grey-17">.bg-light-grey-17</div> <div class="p bg-light-grey-18">.bg-light-grey-18</div> <div class="p bg-light-grey-19">.bg-light-grey-19</div> </div> </div> <div class="row"> <div class="col-sm-4"> <div class="p bg-blue-1">.bg-blue-1</div> <div class="p bg-blue-2">.bg-blue-2</div> <div class="p bg-blue-3">.bg-blue-3</div> <div class="p bg-blue-4">.bg-blue-4</div> <div class="p bg-blue-5">.bg-blue-5</div> <div class="p bg-blue-6">.bg-blue-6</div> <div class="p bg-blue-7">.bg-blue-7</div> <div class="p bg-blue-8">.bg-blue-8</div> <div class="p bg-blue-9">.bg-blue-9</div> <div class="p bg-blue-10">.bg-blue-10</div> <div class="p bg-blue-11">.bg-blue-11</div> <div class="p bg-blue-12">.bg-blue-12</div> <div class="p bg-blue-13">.bg-blue-13</div> <div class="p bg-blue-14">.bg-blue-14</div> <div class="p bg-blue-15">.bg-blue-15</div> <div class="p bg-blue-16">.bg-blue-16</div> <div class="p bg-blue-17">.bg-blue-17</div> <div class="p bg-blue-18">.bg-blue-18</div> <div class="p bg-blue-19">.bg-blue-19</div> </div> <div class="col-sm-4"> <div class="p bg-orange-1">.bg-orange-1</div> <div class="p bg-orange-2">.bg-orange-2</div> <div class="p bg-orange-3">.bg-orange-3</div> <div class="p bg-orange-4">.bg-orange-4</div> <div class="p bg-orange-5">.bg-orange-5</div> <div class="p bg-orange-6">.bg-orange-6</div> <div class="p bg-orange-7">.bg-orange-7</div> <div class="p bg-orange-8">.bg-orange-8</div> <div class="p bg-orange-9">.bg-orange-9</div> <div class="p bg-orange-10">.bg-orange-10</div> <div class="p bg-orange-11">.bg-orange-11</div> <div class="p bg-orange-12">.bg-orange-12</div> <div class="p bg-orange-13">.bg-orange-13</div> <div class="p bg-orange-14">.bg-orange-14</div> <div class="p bg-orange-15">.bg-orange-15</div> <div class="p bg-orange-16">.bg-orange-16</div> <div class="p bg-orange-17">.bg-orange-17</div> <div class="p bg-orange-18">.bg-orange-18</div> <div class="p bg-orange-19">.bg-orange-19</div> </div> <div class="col-sm-4"> <div class="p bg-amber-1">.bg-amber-1</div> <div class="p bg-amber-2">.bg-amber-2</div> <div class="p bg-amber-3">.bg-amber-3</div> <div class="p bg-amber-4">.bg-amber-4</div> <div class="p bg-amber-5">.bg-amber-5</div> <div class="p bg-amber-6">.bg-amber-6</div> <div class="p bg-amber-7">.bg-amber-7</div> <div class="p bg-amber-8">.bg-amber-8</div> <div class="p bg-amber-9">.bg-amber-9</div> <div class="p bg-amber-10">.bg-amber-10</div> <div class="p bg-amber-11">.bg-amber-11</div> <div class="p bg-amber-12">.bg-amber-12</div> <div class="p bg-amber-13">.bg-amber-13</div> <div class="p bg-amber-14">.bg-amber-14</div> <div class="p bg-amber-15">.bg-amber-15</div> <div class="p bg-amber-16">.bg-amber-16</div> <div class="p bg-amber-17">.bg-amber-17</div> <div class="p bg-amber-18">.bg-amber-18</div> <div class="p bg-amber-19">.bg-amber-19</div> </div> <div class="col-sm-4"> <div class="p bg-green-1">.bg-green-1</div> <div class="p bg-green-2">.bg-green-2</div> <div class="p bg-green-3">.bg-green-3</div> <div class="p bg-green-4">.bg-green-4</div> <div class="p bg-green-5">.bg-green-5</div> <div class="p bg-green-6">.bg-green-6</div> <div class="p bg-green-7">.bg-green-7</div> <div class="p bg-green-8">.bg-green-8</div> <div class="p bg-green-9">.bg-green-9</div> <div class="p bg-green-10">.bg-green-10</div> <div class="p bg-green-11">.bg-green-11</div> <div class="p bg-green-12">.bg-green-12</div> <div class="p bg-green-13">.bg-green-13</div> <div class="p bg-green-14">.bg-green-14</div> <div class="p bg-green-15">.bg-green-15</div> <div class="p bg-green-16">.bg-green-16</div> <div class="p bg-green-17">.bg-green-17</div> <div class="p bg-green-18">.bg-green-18</div> <div class="p bg-green-19">.bg-green-19</div> </div> </div> </div> <!------------------ don't remove below ------------------------> <!-- jQuery --> <script src="js/jquery.js"></script> <!-- Bootstrap Core JavaScript --> <script src="js/bootstrap.min.js"></script> </body> </html>
.p {padding:10px;} /************** Background RED Color ***********************/ .bg-red-1 {background-color: #ffe6e6;color: #424448!important; } .bg-red-2 {background-color: #ffcccc;color: #424448!important; } .bg-red-3 {background-color: #ffb3b3;color: #424448!important; } .bg-red-4 {background-color: #ff9999;color: #fff!important; } .bg-red-5 {background-color: #ff8080;color: #fff!important; } .bg-red-6 {background-color: #ff6666;color: #fff!important; } .bg-red-7 {background-color: #ff4d4d;color: #fff!important; } .bg-red-8 {background-color: #ff3333;color: #fff!important; } .bg-red-9 {background-color: #ff1a1a;color: #fff!important; } .bg-red-10 {background-color: #ff0000;color: #fff!important; } .bg-red-11 {background-color: #e60000;color: #fff!important; } .bg-red-12 {background-color: #f44336;color: #fff!important; } .bg-red-13 {background-color: #cc0000;color: #fff!important; } .bg-red-14 {background-color: #b30000;color: #fff!important; } .bg-red-15 {background-color: #990000;color: #fff!important; } .bg-red-16 {background-color: #800000;color: #fff!important; } .bg-red-17 {background-color: #660000;color: #fff!important; } .bg-red-18 {background-color: #4d0000;color: #fff!important; } .bg-red-19 {background-color: #330000;color: #fff!important; } /************** Background GREY Color ***********************/ .bg-grey-1 {background-color: #f2f2f2;color: #424448!important; } .bg-grey-2 {background-color: #e6e6e6;color: #424448!important; } .bg-grey-3 {background-color: #d9d9d9;color: #424448!important; } .bg-grey-4 {background-color: #cccccc;color: #424448!important; } .bg-grey-5 {background-color: #bfbfbf;color: #424448!important; } .bg-grey-6 {background-color: #b3b3b3;color: #424448!important; } .bg-grey-7 {background-color: #a6a6a6;color: #fff!important; } .bg-grey-8 {background-color: #999999;color: #fff!important; } .bg-grey-9 {background-color: #8c8c8c;color: #fff!important; } .bg-grey-10 {background-color: #808080;color: #fff!important; } .bg-grey-11 {background-color: #737373;color: #fff!important; } .bg-grey-12 {background-color: #595959;color: #fff!important; } .bg-grey-13 {background-color: #4d4d4d;color: #fff!important; } .bg-grey-14 {background-color: #404040;color: #fff!important; } .bg-grey-15 {background-color: #333333;color: #fff!important; } .bg-grey-16 {background-color: #262626;color: #fff!important; } .bg-grey-17 {background-color: #1a1a1a;color: #fff!important; } .bg-grey-18 {background-color: #0d0d0d;color: #fff!important; } .bg-grey-19 {background-color: #000000;color: #fff!important; } /************** Background LIGHT GREY Color ***********************/ .bg-light-grey-1 {background-color: #f0f3f5;color: #424448!important; } .bg-light-grey-2 {background-color: #e1e7ea;color: #424448!important; } .bg-light-grey-3 {background-color: #d2dbe0;color: #424448!important; } .bg-light-grey-4 {background-color: #c3cfd5;color: #424448!important; } .bg-light-grey-5 {background-color: #b4c3cb;color: #424448!important; } .bg-light-grey-6 {background-color: #a5b7c0;color: #fff!important; } .bg-light-grey-7 {background-color: #96abb6;color: #fff!important; } .bg-light-grey-8 {background-color: #879fab;color: #fff!important; } .bg-light-grey-9 {background-color: #7893a1;color: #fff!important; } .bg-light-grey-10 {background-color: #698796;color: #fff!important; } .bg-light-grey-11 {background-color: #607d8b;color: #fff!important; } .bg-light-grey-12 {background-color: #5e7a87;color: #fff!important; } .bg-light-grey-13 {background-color: #546c78;color: #fff!important; } .bg-light-grey-14 {background-color: #495f69;color: #fff!important; } .bg-light-grey-15 {background-color: #3f515a;color: #fff!important; } .bg-light-grey-16 {background-color: #34444b;color: #fff!important; } .bg-light-grey-17 {background-color: #2a363c;color: #fff!important; } .bg-light-grey-18 {background-color: #1f292d;color: #fff!important; } .bg-light-grey-19 {background-color: #151b1e;color: #fff!important; } /************** Background blue Color ***********************/ .bg-blue-1 {background-color: #e7f3fe;color: #424448!important; } .bg-blue-2 {background-color: #cfe8fc;color: #424448!important; } .bg-blue-3 {background-color: #b6dcfb;color: #424448!important; } .bg-blue-4 {background-color: #9ed1fa;color: #fff!important; } .bg-blue-5 {background-color: #86c5f9;color: #fff!important; } .bg-blue-6 {background-color: #6eb9f7;color: #fff!important; } .bg-blue-7 {background-color: #55aef6;color: #fff!important; } .bg-blue-8 {background-color: #3da2f5;color: #fff!important; } .bg-blue-9 {background-color: #2597f4;color: #fff!important; } .bg-blue-10 {background-color: #2196f3;color: #fff!important; } .bg-blue-11 {background-color: #0d8bf2;color: #fff!important; } .bg-blue-12 {background-color: #0b7dda;color: #fff!important; } .bg-blue-13 {background-color: #0a6fc2;color: #fff!important; } .bg-blue-14 {background-color: #0961aa;color: #fff!important; } .bg-blue-15 {background-color: #085391;color: #fff!important; } .bg-blue-16 {background-color: #064579;color: #fff!important; } .bg-blue-17 {background-color: #053861;color: #fff!important; } .bg-blue-18 {background-color: #042a49;color: #fff!important; } .bg-blue-19 {background-color: #031c30;color: #fff!important; } /************** Background Orange Color ***********************/ .bg-orange-1 {background-color: #ffebe6;color: #424448!important; } .bg-orange-2 {background-color: #ffd8cc;color: #424448!important; } .bg-orange-3 {background-color: #ffc4b3;color: #424448!important; } .bg-orange-4 {background-color: #ffb199;color: #fff!important; } .bg-orange-5 {background-color: #ff9d80;color: #fff!important; } .bg-orange-6 {background-color: #ff8a66;color: #fff!important; } .bg-orange-7 {background-color: #ff764d;color: #fff!important; } .bg-orange-8 {background-color: #ff6333;color: #fff!important; } .bg-orange-9 {background-color: #ff5722;color: #fff!important; } .bg-orange-10 {background-color: #ff4f1a;color: #fff!important; } .bg-orange-11 {background-color: #ff3c00;color: #fff!important; } .bg-orange-12 {background-color: #e63600;color: #fff!important; } .bg-orange-13 {background-color: #cc3000;color: #fff!important; } .bg-orange-14 {background-color: #b32a00;color: #fff!important; } .bg-orange-15 {background-color: #992400;color: #fff!important; } .bg-orange-16 {background-color: #801e00;color: #fff!important; } .bg-orange-17 {background-color: #661800;color: #fff!important; } .bg-orange-18 {background-color: #4d1200;color: #fff!important; } .bg-orange-19 {background-color: #330c00;color: #fff!important; } /************** Background AMBER Color ***********************/ .bg-amber-1 {background-color: #fff9e6;color: #424448!important; } .bg-amber-2 {background-color: #fff2cc;color: #424448!important; } .bg-amber-3 {background-color: #ffecb3;color: #424448!important; } .bg-amber-4 {background-color: #ffe699;color: #424448!important; } .bg-amber-5 {background-color: #ffdf80;color: #424448!important; } .bg-amber-6 {background-color: #ffd966;color: #424448!important; } .bg-amber-7 {background-color: #ffd24d;color: #424448!important; } .bg-amber-8 {background-color: #ffcc33;color: #fff!important; } .bg-amber-9 {background-color: #ffc61a;color: #fff!important; } .bg-amber-10 {background-color: #ffc107;color: #fff!important; } .bg-amber-11 {background-color: #ffbf00;color: #fff!important; } .bg-amber-12 {background-color: #e6ac00;color: #fff!important; } .bg-amber-13 {background-color: #cc9900;color: #fff!important; } .bg-amber-14 {background-color: #b38600;color: #fff!important; } .bg-amber-15 {background-color: #997300;color: #fff!important; } .bg-amber-16 {background-color: #806000;color: #fff!important; } .bg-amber-17 {background-color: #664d00;color: #fff!important; } .bg-amber-18 {background-color: #4d3900;color: #fff!important; } .bg-amber-19 {background-color: #332600;color: #fff!important; } /************** Background GREEN Color ***********************/ .bg-green-1 {background-color: #edf7ee;color: #424448!important; } .bg-green-2 {background-color: #dcefdc;color: #424448!important; } .bg-green-3 {background-color: #cae8cb;color: #424448!important; } .bg-green-4 {background-color: #b8e0b9;color: #424448!important; } .bg-green-5 {background-color: #a6d8a8;color: #424448!important; } .bg-green-6 {background-color: #95d097;color: #424448!important; } .bg-green-7 {background-color: #a6d8a8;color: #424448!important; } .bg-green-8 {background-color: #83c985;color: #fff!important; } .bg-green-9 {background-color: #71c174;color: #fff!important; } .bg-green-10 {background-color: #5fb962;color: #fff!important; } .bg-green-11 {background-color: #4eb151;color: #fff!important; } .bg-green-12 {background-color: #4caf50;color: #fff!important; } .bg-green-13 {background-color: #46a049;color: #fff!important; } .bg-green-14 {background-color: #3e8e41;color: #fff!important; } .bg-green-15 {background-color: #367c39;color: #fff!important; } .bg-green-16 {background-color: #2f6a31;color: #fff!important; } .bg-green-17 {background-color: #275929;color: #fff!important; } .bg-green-18 {background-color: #1f4720;color: #fff!important; } .bg-green-19 {background-color: #173518;color: #fff!important; }

Related: See More

Paper Kit 2
Testimonials Based on Bootstrap's 6 primary colors.
Buttons-hover with colors
Buttons Colors

Questions / Comments: