Random Cards

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


Your CSS panel code for this would be:

.panel-default > .card-header-Carroll {
background-image: none;
background: #772288;
color: white;
}

.Carroll tr:nth-child(even) {background: #ad7ab8;}
.Carroll tr:nth-child(odd) {background: #d6bddb;}

// Bootstrap's Well Color Layout:
.Carroll {background: #d6bddb;} // Div Example class="well well-sm Foley"
.Foley {background: #ad7ab8;} // Pre Example class="Carroll"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Carroll"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
New York, NYBrendan GriswoldAccountantBMC Software#ad7ab8
Memphis, TNLeslie HakesWeb Graphic DesignerFannie Mae#d6bddb
Las Vegas, NVCarey FuquaAccountantLigand Pharmaceuticals#ad7ab8
Chicago, IlBren SeymourWeb Graphic DesignerCoastal Corp.#d6bddb

Random Bootstrap Panels Color: Jobey


Your CSS panel code for this would be:

.panel-default > .card-header-Jobey {
background-image: none;
background: #dd7777;
color: black;
}

.Jobey tr:nth-child(even) {background: #ebadad;}
.Jobey tr:nth-child(odd) {background: #f5d6d6;}

// Bootstrap's Well Color Layout:
.Jobey {background: #f5d6d6;} // Div Example class="well well-sm Gillit"
.Gillit {background: #ebadad;} // Pre Example class="Jobey"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Jobey"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
New York, NYBrendan GriswoldAccountantBMC Software#ebadad
Memphis, TNLeslie HakesWeb Graphic DesignerFannie Mae#f5d6d6
Las Vegas, NVCarey FuquaAccountantLigand Pharmaceuticals#ebadad
Chicago, IlBren SeymourWeb Graphic DesignerCoastal Corp.#f5d6d6

Random Bootstrap Panels Color: Joice


Your CSS panel code for this would be:

.panel-default > .card-header-Joice {
background-image: none;
background: #cc99aa;
color: black;
}

.Joice tr:nth-child(even) {background: #e0c2cc;}
.Joice tr:nth-child(odd) {background: #f0e0e6;}

// Bootstrap's Well Color Layout:
.Joice {background: #f0e0e6;} // Div Example class="well well-sm Gardner"
.Gardner {background: #e0c2cc;} // Pre Example class="Joice"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Joice"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
New York, NYBrendan GriswoldAccountantBMC Software#e0c2cc
Memphis, TNLeslie HakesWeb Graphic DesignerFannie Mae#f0e0e6
Las Vegas, NVCarey FuquaAccountantLigand Pharmaceuticals#e0c2cc
Chicago, IlBren SeymourWeb Graphic DesignerCoastal Corp.#f0e0e6

Random Bootstrap Panels Color: Brendan


Your CSS panel code for this would be:

.panel-default > .card-header-Brendan {
background-image: none;
background: #1166cc;
color: white;
}

.Brendan tr:nth-child(even) {background: #70a3e0;}
.Brendan tr:nth-child(odd) {background: #b8d1f0;}

// Bootstrap's Well Color Layout:
.Brendan {background: #b8d1f0;} // Div Example class="well well-sm Griswold"
.Griswold {background: #70a3e0;} // Pre Example class="Brendan"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Brendan"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
New York, NYBrendan GriswoldAccountantBMC Software#70a3e0
Memphis, TNLeslie HakesWeb Graphic DesignerFannie Mae#b8d1f0
Las Vegas, NVCarey FuquaAccountantLigand Pharmaceuticals#70a3e0
Chicago, IlBren SeymourWeb Graphic DesignerCoastal Corp.#b8d1f0

Random Bootstrap Panels Color: Leslie


Your CSS panel code for this would be:

.panel-default > .card-header-Leslie {
background-image: none;
background: #00dddd;
color: black;
}

.Leslie tr:nth-child(even) {background: #66ebeb;}
.Leslie tr:nth-child(odd) {background: #b3f5f5;}

// Bootstrap's Well Color Layout:
.Leslie {background: #b3f5f5;} // Div Example class="well well-sm Hakes"
.Hakes {background: #66ebeb;} // Pre Example class="Leslie"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Leslie"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
New York, NYBrendan GriswoldAccountantBMC Software#66ebeb
Memphis, TNLeslie HakesWeb Graphic DesignerFannie Mae#b3f5f5
Las Vegas, NVCarey FuquaAccountantLigand Pharmaceuticals#66ebeb
Chicago, IlBren SeymourWeb Graphic DesignerCoastal Corp.#b3f5f5

Random Bootstrap Panels Color: Carey


Your CSS panel code for this would be:

.panel-default > .card-header-Carey {
background-image: none;
background: #ddeebb;
color: black;
}

.Carey tr:nth-child(even) {background: #ebf5d6;}
.Carey tr:nth-child(odd) {background: #f5faeb;}

// Bootstrap's Well Color Layout:
.Carey {background: #f5faeb;} // Div Example class="well well-sm Fuqua"
.Fuqua {background: #ebf5d6;} // Pre Example class="Carey"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Carey"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
New York, NYBrendan GriswoldAccountantBMC Software#ebf5d6
Memphis, TNLeslie HakesWeb Graphic DesignerFannie Mae#f5faeb
Las Vegas, NVCarey FuquaAccountantLigand Pharmaceuticals#ebf5d6
Chicago, IlBren SeymourWeb Graphic DesignerCoastal Corp.#f5faeb

Random Bootstrap Panels Color: Bren


Your CSS panel code for this would be:

.panel-default > .card-header-Bren {
background-image: none;
background: #998844;
color: white;
}

.Bren tr:nth-child(even) {background: #c2b88f;}
.Bren tr:nth-child(odd) {background: #e0dbc7;}

// Bootstrap's Well Color Layout:
.Bren {background: #e0dbc7;} // Div Example class="well well-sm Seymour"
.Seymour {background: #c2b88f;} // Pre Example class="Bren"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Bren"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
New York, NYBrendan GriswoldAccountantBMC Software#c2b88f
Memphis, TNLeslie HakesWeb Graphic DesignerFannie Mae#e0dbc7
Las Vegas, NVCarey FuquaAccountantLigand Pharmaceuticals#c2b88f
Chicago, IlBren SeymourWeb Graphic DesignerCoastal Corp.#e0dbc7

Random Bootstrap Panels Color: Charlie


Your CSS panel code for this would be:

.panel-default > .card-header-Charlie {
background-image: none;
background: #668844;
color: white;
}

.Charlie tr:nth-child(even) {background: #a3b88f;}
.Charlie tr:nth-child(odd) {background: #d1dbc7;}

// Bootstrap's Well Color Layout:
.Charlie {background: #d1dbc7;} // Div Example class="well well-sm McCabe"
.McCabe {background: #a3b88f;} // Pre Example class="Charlie"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Charlie"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
New York, NYBrendan GriswoldAccountantBMC Software#a3b88f
Memphis, TNLeslie HakesWeb Graphic DesignerFannie Mae#d1dbc7
Las Vegas, NVCarey FuquaAccountantLigand Pharmaceuticals#a3b88f
Chicago, IlBren SeymourWeb Graphic DesignerCoastal Corp.#d1dbc7

Random Bootstrap Panels Color: Joleen


Your CSS panel code for this would be:

.panel-default > .card-header-Joleen {
background-image: none;
background: #553355;
color: white;
}

.Joleen tr:nth-child(even) {background: #998599;}
.Joleen tr:nth-child(odd) {background: #ccc2cc;}

// Bootstrap's Well Color Layout:
.Joleen {background: #ccc2cc;} // Div Example class="well well-sm Goodwin"
.Goodwin {background: #998599;} // Pre Example class="Joleen"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Joleen"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
New York, NYBrendan GriswoldAccountantBMC Software#998599
Memphis, TNLeslie HakesWeb Graphic DesignerFannie Mae#ccc2cc
Las Vegas, NVCarey FuquaAccountantLigand Pharmaceuticals#998599
Chicago, IlBren SeymourWeb Graphic DesignerCoastal Corp.#ccc2cc

Random Bootstrap Panels Color: Bronnie


Your CSS panel code for this would be:

.panel-default > .card-header-Bronnie {
background-image: none;
background: #227722;
color: white;
}

.Bronnie tr:nth-child(even) {background: #7aad7a;}
.Bronnie tr:nth-child(odd) {background: #bdd6bd;}

// Bootstrap's Well Color Layout:
.Bronnie {background: #bdd6bd;} // Div Example class="well well-sm Guernsey"
.Guernsey {background: #7aad7a;} // Pre Example class="Bronnie"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Bronnie"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
New York, NYBrendan GriswoldAccountantBMC Software#7aad7a
Memphis, TNLeslie HakesWeb Graphic DesignerFannie Mae#bdd6bd
Las Vegas, NVCarey FuquaAccountantLigand Pharmaceuticals#7aad7a
Chicago, IlBren SeymourWeb Graphic DesignerCoastal Corp.#bdd6bd

Random Bootstrap Panels Color: Birch


Your CSS panel code for this would be:

.panel-default > .card-header-Birch {
background-image: none;
background: #eebbff;
color: black;
}

.Birch tr:nth-child(even) {background: #f5d6ff;}
.Birch tr:nth-child(odd) {background: #faebff;}

// Bootstrap's Well Color Layout:
.Birch {background: #faebff;} // Div Example class="well well-sm Gould"
.Gould {background: #f5d6ff;} // Pre Example class="Birch"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Birch"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
New York, NYBrendan GriswoldAccountantBMC Software#f5d6ff
Memphis, TNLeslie HakesWeb Graphic DesignerFannie Mae#faebff
Las Vegas, NVCarey FuquaAccountantLigand Pharmaceuticals#f5d6ff
Chicago, IlBren SeymourWeb Graphic DesignerCoastal Corp.#faebff

Random Bootstrap Panels Color: Jelene


Your CSS panel code for this would be:

.panel-default > .card-header-Jelene {
background-image: none;
background: #dd5599;
color: black;
}

.Jelene tr:nth-child(even) {background: #eb99c2;}
.Jelene tr:nth-child(odd) {background: #f5cce0;}

// Bootstrap's Well Color Layout:
.Jelene {background: #f5cce0;} // Div Example class="well well-sm Jones"
.Jones {background: #eb99c2;} // Pre Example class="Jelene"

Your HTML panel 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>
New York, NYBrendan GriswoldAccountantBMC Software#eb99c2
Memphis, TNLeslie HakesWeb Graphic DesignerFannie Mae#f5cce0
Las Vegas, NVCarey FuquaAccountantLigand Pharmaceuticals#eb99c2
Chicago, IlBren SeymourWeb Graphic DesignerCoastal Corp.#f5cce0

Random Bootstrap Panels Color: Jenni


Your CSS panel code for this would be:

.panel-default > .card-header-Jenni {
background-image: none;
background: #66ff33;
color: black;
}

.Jenni tr:nth-child(even) {background: #a3ff85;}
.Jenni tr:nth-child(odd) {background: #d1ffc2;}

// Bootstrap's Well Color Layout:
.Jenni {background: #d1ffc2;} // Div Example class="well well-sm Fritz"
.Fritz {background: #a3ff85;} // Pre Example class="Jenni"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Jenni"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
New York, NYBrendan GriswoldAccountantBMC Software#a3ff85
Memphis, TNLeslie HakesWeb Graphic DesignerFannie Mae#d1ffc2
Las Vegas, NVCarey FuquaAccountantLigand Pharmaceuticals#a3ff85
Chicago, IlBren SeymourWeb Graphic DesignerCoastal Corp.#d1ffc2

Random Bootstrap Panels Color: Brucie


Your CSS panel code for this would be:

.panel-default > .card-header-Brucie {
background-image: none;
background: #ddbb66;
color: black;
}

.Brucie tr:nth-child(even) {background: #ebd6a3;}
.Brucie tr:nth-child(odd) {background: #f5ebd1;}

// Bootstrap's Well Color Layout:
.Brucie {background: #f5ebd1;} // Div Example class="well well-sm Hall"
.Hall {background: #ebd6a3;} // Pre Example class="Brucie"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Brucie"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
New York, NYBrendan GriswoldAccountantBMC Software#ebd6a3
Memphis, TNLeslie HakesWeb Graphic DesignerFannie Mae#f5ebd1
Las Vegas, NVCarey FuquaAccountantLigand Pharmaceuticals#ebd6a3
Chicago, IlBren SeymourWeb Graphic DesignerCoastal Corp.#f5ebd1

Random Bootstrap Panels Color: Janina


Your CSS panel code for this would be:

.panel-default > .card-header-Janina {
background-image: none;
background: #55ff22;
color: white;
}

.Janina tr:nth-child(even) {background: #99ff7a;}
.Janina tr:nth-child(odd) {background: #ccffbd;}

// Bootstrap's Well Color Layout:
.Janina {background: #ccffbd;} // Div Example class="well well-sm Grey"
.Grey {background: #99ff7a;} // Pre Example class="Janina"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Janina"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
New York, NYBrendan GriswoldAccountantBMC Software#99ff7a
Memphis, TNLeslie HakesWeb Graphic DesignerFannie Mae#ccffbd
Las Vegas, NVCarey FuquaAccountantLigand Pharmaceuticals#99ff7a
Chicago, IlBren SeymourWeb Graphic DesignerCoastal Corp.#ccffbd