Random Color Generator for Tables
In Boostrap 4, Cards replaced the "old" Bootstrap panels.
On this page are 40 cards with background colors that were randomly generated. Each card has a unique header, and Table row and alternate color. Refresh this page to see a completely different set of colors.
The Code to create the Cards/Table and Well are include.
Enjoy finding the perfect background color for your project!
Random Bootstrap Panels Color: Jesselyn
Your CSS Card code for this would be:
.card-default > .card-header-Jesselyn {
background-image: none;
background: #dd7700;
color: white;
}
.Jesselyn tr:nth-child(even) {background: #ebad66;}
.Jesselyn tr:nth-child(odd) {background: #f5d6b3;}
// Bootstrap's Well Color Layout:
.Jesselyn {background: #f5d6b3;} // Div Example class="well well-sm Foster"
.Foster {background: #ebad66;} // Pre Example class="Jesselyn"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Jesselyn"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Chicago, Il | Bruno Fairbanks | Programmer/Analyst | Synovus Financial Corp. | #ebad66 |
| Memphis, TN | Libbi Griswold | Accountant | Unocal | #f5d6b3 |
| San Francisco, CA | Johannah Fenno | Programmer/Analyst | A.M. Castle | #ebad66 |
| Billings, MT | Bertrando Field | Accountant | Philips Electronics | #f5d6b3 |
Random Bootstrap Panels Color: Lilli
Your CSS Card code for this would be:
.card-default > .card-header-Lilli {
background-image: none;
background: #cc99ee;
color: black;
}
.Lilli tr:nth-child(even) {background: #e0c2f5;}
.Lilli tr:nth-child(odd) {background: #f0e0fa;}
// Bootstrap's Well Color Layout:
.Lilli {background: #f0e0fa;} // Div Example class="well well-sm Glenn"
.Glenn {background: #e0c2f5;} // Pre Example class="Lilli"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Lilli"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Chicago, Il | Bruno Fairbanks | Programmer/Analyst | Synovus Financial Corp. | #e0c2f5 |
| Memphis, TN | Libbi Griswold | Accountant | Unocal | #f0e0fa |
| San Francisco, CA | Johannah Fenno | Programmer/Analyst | A.M. Castle | #e0c2f5 |
| Billings, MT | Bertrando Field | Accountant | Philips Electronics | #f0e0fa |
Random Bootstrap Panels Color: Butch
Your CSS Card code for this would be:
.card-default > .card-header-Butch {
background-image: none;
background: #aa3355;
color: white;
}
.Butch tr:nth-child(even) {background: #cc8599;}
.Butch tr:nth-child(odd) {background: #e6c2cc;}
// Bootstrap's Well Color Layout:
.Butch {background: #e6c2cc;} // Div Example class="well well-sm Grammer"
.Grammer {background: #cc8599;} // Pre Example class="Butch"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Butch"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Chicago, Il | Bruno Fairbanks | Programmer/Analyst | Synovus Financial Corp. | #cc8599 |
| Memphis, TN | Libbi Griswold | Accountant | Unocal | #e6c2cc |
| San Francisco, CA | Johannah Fenno | Programmer/Analyst | A.M. Castle | #cc8599 |
| Billings, MT | Bertrando Field | Accountant | Philips Electronics | #e6c2cc |
Random Bootstrap Panels Color: Bruno
Your CSS Card code for this would be:
.card-default > .card-header-Bruno {
background-image: none;
background: #550000;
color: white;
}
.Bruno tr:nth-child(even) {background: #996666;}
.Bruno tr:nth-child(odd) {background: #ccb3b3;}
// Bootstrap's Well Color Layout:
.Bruno {background: #ccb3b3;} // Div Example class="well well-sm Fairbanks"
.Fairbanks {background: #996666;} // Pre Example class="Bruno"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Bruno"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Chicago, Il | Bruno Fairbanks | Programmer/Analyst | Synovus Financial Corp. | #996666 |
| Memphis, TN | Libbi Griswold | Accountant | Unocal | #ccb3b3 |
| San Francisco, CA | Johannah Fenno | Programmer/Analyst | A.M. Castle | #996666 |
| Billings, MT | Bertrando Field | Accountant | Philips Electronics | #ccb3b3 |
Random Bootstrap Panels Color: Libbi
Your CSS Card code for this would be:
.card-default > .card-header-Libbi {
background-image: none;
background: #444499;
color: white;
}
.Libbi tr:nth-child(even) {background: #8f8fc2;}
.Libbi tr:nth-child(odd) {background: #c7c7e0;}
// Bootstrap's Well Color Layout:
.Libbi {background: #c7c7e0;} // Div Example class="well well-sm Griswold"
.Griswold {background: #8f8fc2;} // Pre Example class="Libbi"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Libbi"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Chicago, Il | Bruno Fairbanks | Programmer/Analyst | Synovus Financial Corp. | #8f8fc2 |
| Memphis, TN | Libbi Griswold | Accountant | Unocal | #c7c7e0 |
| San Francisco, CA | Johannah Fenno | Programmer/Analyst | A.M. Castle | #8f8fc2 |
| Billings, MT | Bertrando Field | Accountant | Philips Electronics | #c7c7e0 |
Random Bootstrap Panels Color: Johannah
Your CSS Card code for this would be:
.card-default > .card-header-Johannah {
background-image: none;
background: #2244dd;
color: white;
}
.Johannah tr:nth-child(even) {background: #7a8feb;}
.Johannah tr:nth-child(odd) {background: #bdc7f5;}
// Bootstrap's Well Color Layout:
.Johannah {background: #bdc7f5;} // Div Example class="well well-sm Fenno"
.Fenno {background: #7a8feb;} // Pre Example class="Johannah"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Johannah"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Chicago, Il | Bruno Fairbanks | Programmer/Analyst | Synovus Financial Corp. | #7a8feb |
| Memphis, TN | Libbi Griswold | Accountant | Unocal | #bdc7f5 |
| San Francisco, CA | Johannah Fenno | Programmer/Analyst | A.M. Castle | #7a8feb |
| Billings, MT | Bertrando Field | Accountant | Philips Electronics | #bdc7f5 |
Random Bootstrap Panels Color: Bertrando
Your CSS Card code for this would be:
.card-default > .card-header-Bertrando {
background-image: none;
background: #119933;
color: white;
}
.Bertrando tr:nth-child(even) {background: #70c285;}
.Bertrando tr:nth-child(odd) {background: #b8e0c2;}
// Bootstrap's Well Color Layout:
.Bertrando {background: #b8e0c2;} // Div Example class="well well-sm Field"
.Field {background: #70c285;} // Pre Example class="Bertrando"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Bertrando"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Chicago, Il | Bruno Fairbanks | Programmer/Analyst | Synovus Financial Corp. | #70c285 |
| Memphis, TN | Libbi Griswold | Accountant | Unocal | #b8e0c2 |
| San Francisco, CA | Johannah Fenno | Programmer/Analyst | A.M. Castle | #70c285 |
| Billings, MT | Bertrando Field | Accountant | Philips Electronics | #b8e0c2 |
Random Bootstrap Panels Color: Brockie
Your CSS Card code for this would be:
.card-default > .card-header-Brockie {
background-image: none;
background: #335577;
color: white;
}
.Brockie tr:nth-child(even) {background: #8599ad;}
.Brockie tr:nth-child(odd) {background: #c2ccd6;}
// Bootstrap's Well Color Layout:
.Brockie {background: #c2ccd6;} // Div Example class="well well-sm Lee"
.Lee {background: #8599ad;} // Pre Example class="Brockie"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Brockie"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Chicago, Il | Bruno Fairbanks | Programmer/Analyst | Synovus Financial Corp. | #8599ad |
| Memphis, TN | Libbi Griswold | Accountant | Unocal | #c2ccd6 |
| San Francisco, CA | Johannah Fenno | Programmer/Analyst | A.M. Castle | #8599ad |
| Billings, MT | Bertrando Field | Accountant | Philips Electronics | #c2ccd6 |
Random Bootstrap Panels Color: Bone
Your CSS Card code for this would be:
.card-default > .card-header-Bone {
background-image: none;
background: #22eeaa;
color: black;
}
.Bone tr:nth-child(even) {background: #7af5cc;}
.Bone tr:nth-child(odd) {background: #bdfae6;}
// Bootstrap's Well Color Layout:
.Bone {background: #bdfae6;} // Div Example class="well well-sm Gillit"
.Gillit {background: #7af5cc;} // Pre Example class="Bone"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Bone"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Chicago, Il | Bruno Fairbanks | Programmer/Analyst | Synovus Financial Corp. | #7af5cc |
| Memphis, TN | Libbi Griswold | Accountant | Unocal | #bdfae6 |
| San Francisco, CA | Johannah Fenno | Programmer/Analyst | A.M. Castle | #7af5cc |
| Billings, MT | Bertrando Field | Accountant | Philips Electronics | #bdfae6 |
Random Bootstrap Panels Color: Jelene
Your CSS Card code for this would be:
.card-default > .card-header-Jelene {
background-image: none;
background: #aa66ee;
color: black;
}
.Jelene tr:nth-child(even) {background: #cca3f5;}
.Jelene tr:nth-child(odd) {background: #e6d1fa;}
// Bootstrap's Well Color Layout:
.Jelene {background: #e6d1fa;} // Div Example class="well well-sm Fresh"
.Fresh {background: #cca3f5;} // Pre Example class="Jelene"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Jelene"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Chicago, Il | Bruno Fairbanks | Programmer/Analyst | Synovus Financial Corp. | #cca3f5 |
| Memphis, TN | Libbi Griswold | Accountant | Unocal | #e6d1fa |
| San Francisco, CA | Johannah Fenno | Programmer/Analyst | A.M. Castle | #cca3f5 |
| Billings, MT | Bertrando Field | Accountant | Philips Electronics | #e6d1fa |
Random Bootstrap Panels Color: Julieta
Your CSS Card code for this would be:
.card-default > .card-header-Julieta {
background-image: none;
background: #5577ff;
color: black;
}
.Julieta tr:nth-child(even) {background: #99adff;}
.Julieta tr:nth-child(odd) {background: #ccd6ff;}
// Bootstrap's Well Color Layout:
.Julieta {background: #ccd6ff;} // Div Example class="well well-sm Farnsworth"
.Farnsworth {background: #99adff;} // Pre Example class="Julieta"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Julieta"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Chicago, Il | Bruno Fairbanks | Programmer/Analyst | Synovus Financial Corp. | #99adff |
| Memphis, TN | Libbi Griswold | Accountant | Unocal | #ccd6ff |
| San Francisco, CA | Johannah Fenno | Programmer/Analyst | A.M. Castle | #99adff |
| Billings, MT | Bertrando Field | Accountant | Philips Electronics | #ccd6ff |
Random Bootstrap Panels Color: Bret
Your CSS Card code for this would be:
.card-default > .card-header-Bret {
background-image: none;
background: #555500;
color: white;
}
.Bret tr:nth-child(even) {background: #999966;}
.Bret tr:nth-child(odd) {background: #ccccb3;}
// Bootstrap's Well Color Layout:
.Bret {background: #ccccb3;} // Div Example class="well well-sm Fearing"
.Fearing {background: #999966;} // Pre Example class="Bret"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Bret"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Chicago, Il | Bruno Fairbanks | Programmer/Analyst | Synovus Financial Corp. | #999966 |
| Memphis, TN | Libbi Griswold | Accountant | Unocal | #ccccb3 |
| San Francisco, CA | Johannah Fenno | Programmer/Analyst | A.M. Castle | #999966 |
| Billings, MT | Bertrando Field | Accountant | Philips Electronics | #ccccb3 |
Random Bootstrap Panels Color: Lissi
Your CSS Card code for this would be:
.card-default > .card-header-Lissi {
background-image: none;
background: #444499;
color: white;
}
.Lissi tr:nth-child(even) {background: #8f8fc2;}
.Lissi tr:nth-child(odd) {background: #c7c7e0;}
// Bootstrap's Well Color Layout:
.Lissi {background: #c7c7e0;} // Div Example class="well well-sm Furgerson"
.Furgerson {background: #8f8fc2;} // Pre Example class="Lissi"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Lissi"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Chicago, Il | Bruno Fairbanks | Programmer/Analyst | Synovus Financial Corp. | #8f8fc2 |
| Memphis, TN | Libbi Griswold | Accountant | Unocal | #c7c7e0 |
| San Francisco, CA | Johannah Fenno | Programmer/Analyst | A.M. Castle | #8f8fc2 |
| Billings, MT | Bertrando Field | Accountant | Philips Electronics | #c7c7e0 |
Random Bootstrap Panels Color: Buckie
Your CSS Card code for this would be:
.card-default > .card-header-Buckie {
background-image: none;
background: #2288dd;
color: black;
}
.Buckie tr:nth-child(even) {background: #7ab8eb;}
.Buckie tr:nth-child(odd) {background: #bddbf5;}
// Bootstrap's Well Color Layout:
.Buckie {background: #bddbf5;} // Div Example class="well well-sm Gurney"
.Gurney {background: #7ab8eb;} // Pre Example class="Buckie"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Buckie"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Chicago, Il | Bruno Fairbanks | Programmer/Analyst | Synovus Financial Corp. | #7ab8eb |
| Memphis, TN | Libbi Griswold | Accountant | Unocal | #bddbf5 |
| San Francisco, CA | Johannah Fenno | Programmer/Analyst | A.M. Castle | #7ab8eb |
| Billings, MT | Bertrando Field | Accountant | Philips Electronics | #bddbf5 |
Random Bootstrap Panels Color: Lauryn
Your CSS Card code for this would be:
.card-default > .card-header-Lauryn {
background-image: none;
background: #55dd88;
color: black;
}
.Lauryn tr:nth-child(even) {background: #99ebb8;}
.Lauryn tr:nth-child(odd) {background: #ccf5db;}
// Bootstrap's Well Color Layout:
.Lauryn {background: #ccf5db;} // Div Example class="well well-sm Gassett"
.Gassett {background: #99ebb8;} // Pre Example class="Lauryn"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Lauryn"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Chicago, Il | Bruno Fairbanks | Programmer/Analyst | Synovus Financial Corp. | #99ebb8 |
| Memphis, TN | Libbi Griswold | Accountant | Unocal | #ccf5db |
| San Francisco, CA | Johannah Fenno | Programmer/Analyst | A.M. Castle | #99ebb8 |
| Billings, MT | Bertrando Field | Accountant | Philips Electronics | #ccf5db |