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: Lila
Your CSS Card code for this would be:
.card-default > .card-header-Lila {
background-image: none;
background: #3333ff;
color: white;
}
.Lila tr:nth-child(even) {background: #8585ff;}
.Lila tr:nth-child(odd) {background: #c2c2ff;}
// Bootstrap's Well Color Layout:
.Lila {background: #c2c2ff;} // Div Example class="well well-sm Godspeed"
.Godspeed {background: #8585ff;} // Pre Example class="Lila"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Lila"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Dallas, TX | Jodie Farrar | Director of Communications and Media Relations | Progressive Corp. | #8585ff |
| Boston, MA | Ced Fairbanks | SAP System Architect | Arris | #c2c2ff |
| Washington, DC | Lesley Griswold | Director of Communications and Media Relations | EMC Corp. | #8585ff |
| Chicago, Il | Billy Garland | SAP System Architect | ReliaSar Financial | #c2c2ff |
Random Bootstrap Panels Color: Borden
Your CSS Card code for this would be:
.card-default > .card-header-Borden {
background-image: none;
background: #aaaa66;
color: black;
}
.Borden tr:nth-child(even) {background: #cccca3;}
.Borden tr:nth-child(odd) {background: #e6e6d1;}
// Bootstrap's Well Color Layout:
.Borden {background: #e6e6d1;} // Div Example class="well well-sm Tittle"
.Tittle {background: #cccca3;} // Pre Example class="Borden"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Borden"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Dallas, TX | Jodie Farrar | Director of Communications and Media Relations | Progressive Corp. | #cccca3 |
| Boston, MA | Ced Fairbanks | SAP System Architect | Arris | #e6e6d1 |
| Washington, DC | Lesley Griswold | Director of Communications and Media Relations | EMC Corp. | #cccca3 |
| Chicago, Il | Billy Garland | SAP System Architect | ReliaSar Financial | #e6e6d1 |
Random Bootstrap Panels Color: Jessamyn
Your CSS Card code for this would be:
.card-default > .card-header-Jessamyn {
background-image: none;
background: #99ddff;
color: black;
}
.Jessamyn tr:nth-child(even) {background: #c2ebff;}
.Jessamyn tr:nth-child(odd) {background: #e0f5ff;}
// Bootstrap's Well Color Layout:
.Jessamyn {background: #e0f5ff;} // Div Example class="well well-sm Fairfield"
.Fairfield {background: #c2ebff;} // Pre Example class="Jessamyn"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Jessamyn"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Dallas, TX | Jodie Farrar | Director of Communications and Media Relations | Progressive Corp. | #c2ebff |
| Boston, MA | Ced Fairbanks | SAP System Architect | Arris | #e0f5ff |
| Washington, DC | Lesley Griswold | Director of Communications and Media Relations | EMC Corp. | #c2ebff |
| Chicago, Il | Billy Garland | SAP System Architect | ReliaSar Financial | #e0f5ff |
Random Bootstrap Panels Color: Jodie
Your CSS Card code for this would be:
.card-default > .card-header-Jodie {
background-image: none;
background: #bb33ee;
color: black;
}
.Jodie tr:nth-child(even) {background: #d685f5;}
.Jodie tr:nth-child(odd) {background: #ebc2fa;}
// Bootstrap's Well Color Layout:
.Jodie {background: #ebc2fa;} // Div Example class="well well-sm Farrar"
.Farrar {background: #d685f5;} // Pre Example class="Jodie"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Jodie"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Dallas, TX | Jodie Farrar | Director of Communications and Media Relations | Progressive Corp. | #d685f5 |
| Boston, MA | Ced Fairbanks | SAP System Architect | Arris | #ebc2fa |
| Washington, DC | Lesley Griswold | Director of Communications and Media Relations | EMC Corp. | #d685f5 |
| Chicago, Il | Billy Garland | SAP System Architect | ReliaSar Financial | #ebc2fa |
Random Bootstrap Panels Color: Ced
Your CSS Card code for this would be:
.card-default > .card-header-Ced {
background-image: none;
background: #88eeee;
color: black;
}
.Ced tr:nth-child(even) {background: #b8f5f5;}
.Ced tr:nth-child(odd) {background: #dbfafa;}
// Bootstrap's Well Color Layout:
.Ced {background: #dbfafa;} // Div Example class="well well-sm Fairbanks"
.Fairbanks {background: #b8f5f5;} // Pre Example class="Ced"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Ced"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Dallas, TX | Jodie Farrar | Director of Communications and Media Relations | Progressive Corp. | #b8f5f5 |
| Boston, MA | Ced Fairbanks | SAP System Architect | Arris | #dbfafa |
| Washington, DC | Lesley Griswold | Director of Communications and Media Relations | EMC Corp. | #b8f5f5 |
| Chicago, Il | Billy Garland | SAP System Architect | ReliaSar Financial | #dbfafa |
Random Bootstrap Panels Color: Lesley
Your CSS Card code for this would be:
.card-default > .card-header-Lesley {
background-image: none;
background: #0099ee;
color: black;
}
.Lesley tr:nth-child(even) {background: #66c2f5;}
.Lesley tr:nth-child(odd) {background: #b3e0fa;}
// Bootstrap's Well Color Layout:
.Lesley {background: #b3e0fa;} // Div Example class="well well-sm Griswold"
.Griswold {background: #66c2f5;} // Pre Example class="Lesley"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Lesley"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Dallas, TX | Jodie Farrar | Director of Communications and Media Relations | Progressive Corp. | #66c2f5 |
| Boston, MA | Ced Fairbanks | SAP System Architect | Arris | #b3e0fa |
| Washington, DC | Lesley Griswold | Director of Communications and Media Relations | EMC Corp. | #66c2f5 |
| Chicago, Il | Billy Garland | SAP System Architect | ReliaSar Financial | #b3e0fa |
Random Bootstrap Panels Color: Billy
Your CSS Card code for this would be:
.card-default > .card-header-Billy {
background-image: none;
background: #55ee11;
color: white;
}
.Billy tr:nth-child(even) {background: #99f570;}
.Billy tr:nth-child(odd) {background: #ccfab8;}
// Bootstrap's Well Color Layout:
.Billy {background: #ccfab8;} // Div Example class="well well-sm Garland"
.Garland {background: #99f570;} // Pre Example class="Billy"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Billy"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Dallas, TX | Jodie Farrar | Director of Communications and Media Relations | Progressive Corp. | #99f570 |
| Boston, MA | Ced Fairbanks | SAP System Architect | Arris | #ccfab8 |
| Washington, DC | Lesley Griswold | Director of Communications and Media Relations | EMC Corp. | #99f570 |
| Chicago, Il | Billy Garland | SAP System Architect | ReliaSar Financial | #ccfab8 |
Random Bootstrap Panels Color: Jodee
Your CSS Card code for this would be:
.card-default > .card-header-Jodee {
background-image: none;
background: #11ff11;
color: white;
}
.Jodee tr:nth-child(even) {background: #70ff70;}
.Jodee tr:nth-child(odd) {background: #b8ffb8;}
// Bootstrap's Well Color Layout:
.Jodee {background: #b8ffb8;} // Div Example class="well well-sm Grant"
.Grant {background: #70ff70;} // Pre Example class="Jodee"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Jodee"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Dallas, TX | Jodie Farrar | Director of Communications and Media Relations | Progressive Corp. | #70ff70 |
| Boston, MA | Ced Fairbanks | SAP System Architect | Arris | #b8ffb8 |
| Washington, DC | Lesley Griswold | Director of Communications and Media Relations | EMC Corp. | #70ff70 |
| Chicago, Il | Billy Garland | SAP System Architect | ReliaSar Financial | #b8ffb8 |
Random Bootstrap Panels Color: Bronson
Your CSS Card code for this would be:
.card-default > .card-header-Bronson {
background-image: none;
background: #aa66ff;
color: black;
}
.Bronson tr:nth-child(even) {background: #cca3ff;}
.Bronson tr:nth-child(odd) {background: #e6d1ff;}
// Bootstrap's Well Color Layout:
.Bronson {background: #e6d1ff;} // Div Example class="well well-sm Gale"
.Gale {background: #cca3ff;} // Pre Example class="Bronson"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Bronson"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Dallas, TX | Jodie Farrar | Director of Communications and Media Relations | Progressive Corp. | #cca3ff |
| Boston, MA | Ced Fairbanks | SAP System Architect | Arris | #e6d1ff |
| Washington, DC | Lesley Griswold | Director of Communications and Media Relations | EMC Corp. | #cca3ff |
| Chicago, Il | Billy Garland | SAP System Architect | ReliaSar Financial | #e6d1ff |
Random Bootstrap Panels Color: Jewelle
Your CSS Card code for this would be:
.card-default > .card-header-Jewelle {
background-image: none;
background: #44cc66;
color: white;
}
.Jewelle tr:nth-child(even) {background: #8fe0a3;}
.Jewelle tr:nth-child(odd) {background: #c7f0d1;}
// Bootstrap's Well Color Layout:
.Jewelle {background: #c7f0d1;} // Div Example class="well well-sm Freeland"
.Freeland {background: #8fe0a3;} // Pre Example class="Jewelle"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Jewelle"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Dallas, TX | Jodie Farrar | Director of Communications and Media Relations | Progressive Corp. | #8fe0a3 |
| Boston, MA | Ced Fairbanks | SAP System Architect | Arris | #c7f0d1 |
| Washington, DC | Lesley Griswold | Director of Communications and Media Relations | EMC Corp. | #8fe0a3 |
| Chicago, Il | Billy Garland | SAP System Architect | ReliaSar Financial | #c7f0d1 |
Random Bootstrap Panels Color: Cheston
Your CSS Card code for this would be:
.card-default > .card-header-Cheston {
background-image: none;
background: #2277dd;
color: white;
}
.Cheston tr:nth-child(even) {background: #7aadeb;}
.Cheston tr:nth-child(odd) {background: #bdd6f5;}
// Bootstrap's Well Color Layout:
.Cheston {background: #bdd6f5;} // Div Example class="well well-sm Gill"
.Gill {background: #7aadeb;} // Pre Example class="Cheston"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Cheston"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Dallas, TX | Jodie Farrar | Director of Communications and Media Relations | Progressive Corp. | #7aadeb |
| Boston, MA | Ced Fairbanks | SAP System Architect | Arris | #bdd6f5 |
| Washington, DC | Lesley Griswold | Director of Communications and Media Relations | EMC Corp. | #7aadeb |
| Chicago, Il | Billy Garland | SAP System Architect | ReliaSar Financial | #bdd6f5 |
Random Bootstrap Panels Color: Janeva
Your CSS Card code for this would be:
.card-default > .card-header-Janeva {
background-image: none;
background: #66bb33;
color: white;
}
.Janeva tr:nth-child(even) {background: #a3d685;}
.Janeva tr:nth-child(odd) {background: #d1ebc2;}
// Bootstrap's Well Color Layout:
.Janeva {background: #d1ebc2;} // Div Example class="well well-sm Lee"
.Lee {background: #a3d685;} // Pre Example class="Janeva"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Janeva"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Dallas, TX | Jodie Farrar | Director of Communications and Media Relations | Progressive Corp. | #a3d685 |
| Boston, MA | Ced Fairbanks | SAP System Architect | Arris | #d1ebc2 |
| Washington, DC | Lesley Griswold | Director of Communications and Media Relations | EMC Corp. | #a3d685 |
| Chicago, Il | Billy Garland | SAP System Architect | ReliaSar Financial | #d1ebc2 |
Random Bootstrap Panels Color: Josephina
Your CSS Card code for this would be:
.card-default > .card-header-Josephina {
background-image: none;
background: #55cc00;
color: white;
}
.Josephina tr:nth-child(even) {background: #99e066;}
.Josephina tr:nth-child(odd) {background: #ccf0b3;}
// Bootstrap's Well Color Layout:
.Josephina {background: #ccf0b3;} // Div Example class="well well-sm Hall"
.Hall {background: #99e066;} // Pre Example class="Josephina"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Josephina"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Dallas, TX | Jodie Farrar | Director of Communications and Media Relations | Progressive Corp. | #99e066 |
| Boston, MA | Ced Fairbanks | SAP System Architect | Arris | #ccf0b3 |
| Washington, DC | Lesley Griswold | Director of Communications and Media Relations | EMC Corp. | #99e066 |
| Chicago, Il | Billy Garland | SAP System Architect | ReliaSar Financial | #ccf0b3 |
Random Bootstrap Panels Color: Jillana
Your CSS Card code for this would be:
.card-default > .card-header-Jillana {
background-image: none;
background: #bb1144;
color: white;
}
.Jillana tr:nth-child(even) {background: #d6708f;}
.Jillana tr:nth-child(odd) {background: #ebb8c7;}
// Bootstrap's Well Color Layout:
.Jillana {background: #ebb8c7;} // Div Example class="well well-sm Goff"
.Goff {background: #d6708f;} // Pre Example class="Jillana"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Jillana"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Dallas, TX | Jodie Farrar | Director of Communications and Media Relations | Progressive Corp. | #d6708f |
| Boston, MA | Ced Fairbanks | SAP System Architect | Arris | #ebb8c7 |
| Washington, DC | Lesley Griswold | Director of Communications and Media Relations | EMC Corp. | #d6708f |
| Chicago, Il | Billy Garland | SAP System Architect | ReliaSar Financial | #ebb8c7 |
Random Bootstrap Panels Color: Leland
Your CSS Card code for this would be:
.card-default > .card-header-Leland {
background-image: none;
background: #ccbbff;
color: black;
}
.Leland tr:nth-child(even) {background: #e0d6ff;}
.Leland tr:nth-child(odd) {background: #f0ebff;}
// Bootstrap's Well Color Layout:
.Leland {background: #f0ebff;} // Div Example class="well well-sm Farnsworth"
.Farnsworth {background: #e0d6ff;} // Pre Example class="Leland"
Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Leland"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
| Dallas, TX | Jodie Farrar | Director of Communications and Media Relations | Progressive Corp. | #e0d6ff |
| Boston, MA | Ced Fairbanks | SAP System Architect | Arris | #f0ebff |
| Washington, DC | Lesley Griswold | Director of Communications and Media Relations | EMC Corp. | #e0d6ff |
| Chicago, Il | Billy Garland | SAP System Architect | ReliaSar Financial | #f0ebff |