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


Your CSS panel code for this would be:

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

.Brent tr:nth-child(even) {background: #7070b8;}
.Brent tr:nth-child(odd) {background: #b8b8db;}

// Bootstrap's Well Color Layout:
.Brent {background: #b8b8db;} // Div Example class="well well-sm Farrar"
.Farrar {background: #7070b8;} // Pre Example class="Brent"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Brent"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Memphis, TNJanina FranklinDeveloperEmisphere Technol#7070b8
Little Rock, ARCaspar GrantProgrammerTJ International Inc.#b8b8db
Dallas, TXLinette JohnsonDeveloperTetra Technologies Inc.#7070b8
Billings, MTBrew GalushaProgrammerNuevo Energy Co.#b8b8db

Random Bootstrap Panels Color: Jessica


Your CSS panel code for this would be:

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

.Jessica tr:nth-child(even) {background: #c2b8b8;}
.Jessica tr:nth-child(odd) {background: #e0dbdb;}

// Bootstrap's Well Color Layout:
.Jessica {background: #e0dbdb;} // Div Example class="well well-sm Gibbons"
.Gibbons {background: #c2b8b8;} // Pre Example class="Jessica"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Jessica"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Memphis, TNJanina FranklinDeveloperEmisphere Technol#c2b8b8
Little Rock, ARCaspar GrantProgrammerTJ International Inc.#e0dbdb
Dallas, TXLinette JohnsonDeveloperTetra Technologies Inc.#c2b8b8
Billings, MTBrew GalushaProgrammerNuevo Energy Co.#e0dbdb

Random Bootstrap Panels Color: Joanie


Your CSS panel code for this would be:

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

.Joanie tr:nth-child(even) {background: #eb66b8;}
.Joanie tr:nth-child(odd) {background: #f5b3db;}

// Bootstrap's Well Color Layout:
.Joanie {background: #f5b3db;} // Div Example class="well well-sm Fouche"
.Fouche {background: #eb66b8;} // Pre Example class="Joanie"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Joanie"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Memphis, TNJanina FranklinDeveloperEmisphere Technol#eb66b8
Little Rock, ARCaspar GrantProgrammerTJ International Inc.#f5b3db
Dallas, TXLinette JohnsonDeveloperTetra Technologies Inc.#eb66b8
Billings, MTBrew GalushaProgrammerNuevo Energy Co.#f5b3db

Random Bootstrap Panels Color: Janina


Your CSS panel code for this would be:

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

.Janina tr:nth-child(even) {background: #ffd6f5;}
.Janina tr:nth-child(odd) {background: #ffebfa;}

// Bootstrap's Well Color Layout:
.Janina {background: #ffebfa;} // Div Example class="well well-sm Franklin"
.Franklin {background: #ffd6f5;} // 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>
Memphis, TNJanina FranklinDeveloperEmisphere Technol#ffd6f5
Little Rock, ARCaspar GrantProgrammerTJ International Inc.#ffebfa
Dallas, TXLinette JohnsonDeveloperTetra Technologies Inc.#ffd6f5
Billings, MTBrew GalushaProgrammerNuevo Energy Co.#ffebfa

Random Bootstrap Panels Color: Caspar


Your CSS panel code for this would be:

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

.Caspar tr:nth-child(even) {background: #ccd6f5;}
.Caspar tr:nth-child(odd) {background: #e6ebfa;}

// Bootstrap's Well Color Layout:
.Caspar {background: #e6ebfa;} // Div Example class="well well-sm Grant"
.Grant {background: #ccd6f5;} // Pre Example class="Caspar"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Caspar"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Memphis, TNJanina FranklinDeveloperEmisphere Technol#ccd6f5
Little Rock, ARCaspar GrantProgrammerTJ International Inc.#e6ebfa
Dallas, TXLinette JohnsonDeveloperTetra Technologies Inc.#ccd6f5
Billings, MTBrew GalushaProgrammerNuevo Energy Co.#e6ebfa

Random Bootstrap Panels Color: Linette


Your CSS panel code for this would be:

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

.Linette tr:nth-child(even) {background: #f566b8;}
.Linette tr:nth-child(odd) {background: #fab3db;}

// Bootstrap's Well Color Layout:
.Linette {background: #fab3db;} // Div Example class="well well-sm Johnson"
.Johnson {background: #f566b8;} // Pre Example class="Linette"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Linette"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Memphis, TNJanina FranklinDeveloperEmisphere Technol#f566b8
Little Rock, ARCaspar GrantProgrammerTJ International Inc.#fab3db
Dallas, TXLinette JohnsonDeveloperTetra Technologies Inc.#f566b8
Billings, MTBrew GalushaProgrammerNuevo Energy Co.#fab3db

Random Bootstrap Panels Color: Brew


Your CSS panel code for this would be:

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

.Brew tr:nth-child(even) {background: #ffffa3;}
.Brew tr:nth-child(odd) {background: #ffffd1;}

// Bootstrap's Well Color Layout:
.Brew {background: #ffffd1;} // Div Example class="well well-sm Galusha"
.Galusha {background: #ffffa3;} // Pre Example class="Brew"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Brew"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Memphis, TNJanina FranklinDeveloperEmisphere Technol#ffffa3
Little Rock, ARCaspar GrantProgrammerTJ International Inc.#ffffd1
Dallas, TXLinette JohnsonDeveloperTetra Technologies Inc.#ffffa3
Billings, MTBrew GalushaProgrammerNuevo Energy Co.#ffffd1

Random Bootstrap Panels Color: Jacky


Your CSS panel code for this would be:

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

.Jacky tr:nth-child(even) {background: #70c2c2;}
.Jacky tr:nth-child(odd) {background: #b8e0e0;}

// Bootstrap's Well Color Layout:
.Jacky {background: #b8e0e0;} // Div Example class="well well-sm Godden"
.Godden {background: #70c2c2;} // Pre Example class="Jacky"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Jacky"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Memphis, TNJanina FranklinDeveloperEmisphere Technol#70c2c2
Little Rock, ARCaspar GrantProgrammerTJ International Inc.#b8e0e0
Dallas, TXLinette JohnsonDeveloperTetra Technologies Inc.#70c2c2
Billings, MTBrew GalushaProgrammerNuevo Energy Co.#b8e0e0

Random Bootstrap Panels Color: Judi


Your CSS panel code for this would be:

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

.Judi tr:nth-child(even) {background: #6699a3;}
.Judi tr:nth-child(odd) {background: #b3ccd1;}

// Bootstrap's Well Color Layout:
.Judi {background: #b3ccd1;} // Div Example class="well well-sm Gorrell"
.Gorrell {background: #6699a3;} // Pre Example class="Judi"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Judi"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Memphis, TNJanina FranklinDeveloperEmisphere Technol#6699a3
Little Rock, ARCaspar GrantProgrammerTJ International Inc.#b3ccd1
Dallas, TXLinette JohnsonDeveloperTetra Technologies Inc.#6699a3
Billings, MTBrew GalushaProgrammerNuevo Energy Co.#b3ccd1

Random Bootstrap Panels Color: Cad


Your CSS panel code for this would be:

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

.Cad tr:nth-child(even) {background: #f5e07a;}
.Cad tr:nth-child(odd) {background: #faf0bd;}

// Bootstrap's Well Color Layout:
.Cad {background: #faf0bd;} // Div Example class="well well-sm Groce"
.Groce {background: #f5e07a;} // Pre Example class="Cad"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Cad"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Memphis, TNJanina FranklinDeveloperEmisphere Technol#f5e07a
Little Rock, ARCaspar GrantProgrammerTJ International Inc.#faf0bd
Dallas, TXLinette JohnsonDeveloperTetra Technologies Inc.#f5e07a
Billings, MTBrew GalushaProgrammerNuevo Energy Co.#faf0bd

Random Bootstrap Panels Color: Justinn


Your CSS panel code for this would be:

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

.Justinn tr:nth-child(even) {background: #d6c2ad;}
.Justinn tr:nth-child(odd) {background: #ebe0d6;}

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

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Justinn"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Memphis, TNJanina FranklinDeveloperEmisphere Technol#d6c2ad
Little Rock, ARCaspar GrantProgrammerTJ International Inc.#ebe0d6
Dallas, TXLinette JohnsonDeveloperTetra Technologies Inc.#d6c2ad
Billings, MTBrew GalushaProgrammerNuevo Energy Co.#ebe0d6

Random Bootstrap Panels Color: Brien


Your CSS panel code for this would be:

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

.Brien tr:nth-child(even) {background: #d6cc85;}
.Brien tr:nth-child(odd) {background: #ebe6c2;}

// Bootstrap's Well Color Layout:
.Brien {background: #ebe6c2;} // Div Example class="well well-sm Garnet"
.Garnet {background: #d6cc85;} // Pre Example class="Brien"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Brien"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Memphis, TNJanina FranklinDeveloperEmisphere Technol#d6cc85
Little Rock, ARCaspar GrantProgrammerTJ International Inc.#ebe6c2
Dallas, TXLinette JohnsonDeveloperTetra Technologies Inc.#d6cc85
Billings, MTBrew GalushaProgrammerNuevo Energy Co.#ebe6c2

Random Bootstrap Panels Color: Carlos


Your CSS panel code for this would be:

.panel-default > .card-header-Carlos {
background-image: none;
background: #5533bb;
color: white;
}

.Carlos tr:nth-child(even) {background: #9985d6;}
.Carlos tr:nth-child(odd) {background: #ccc2eb;}

// Bootstrap's Well Color Layout:
.Carlos {background: #ccc2eb;} // Div Example class="well well-sm Fenno"
.Fenno {background: #9985d6;} // Pre Example class="Carlos"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Carlos"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Memphis, TNJanina FranklinDeveloperEmisphere Technol#9985d6
Little Rock, ARCaspar GrantProgrammerTJ International Inc.#ccc2eb
Dallas, TXLinette JohnsonDeveloperTetra Technologies Inc.#9985d6
Billings, MTBrew GalushaProgrammerNuevo Energy Co.#ccc2eb

Random Bootstrap Panels Color: Josephine


Your CSS panel code for this would be:

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

.Josephine tr:nth-child(even) {background: #ad8fa3;}
.Josephine tr:nth-child(odd) {background: #d6c7d1;}

// Bootstrap's Well Color Layout:
.Josephine {background: #d6c7d1;} // Div Example class="well well-sm Folsom"
.Folsom {background: #ad8fa3;} // Pre Example class="Josephine"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Josephine"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Memphis, TNJanina FranklinDeveloperEmisphere Technol#ad8fa3
Little Rock, ARCaspar GrantProgrammerTJ International Inc.#d6c7d1
Dallas, TXLinette JohnsonDeveloperTetra Technologies Inc.#ad8fa3
Billings, MTBrew GalushaProgrammerNuevo Energy Co.#d6c7d1

Random Bootstrap Panels Color: Lindi


Your CSS panel code for this would be:

.panel-default > .card-header-Lindi {
background-image: none;
background: #11eecc;
color: black;
}

.Lindi tr:nth-child(even) {background: #70f5e0;}
.Lindi tr:nth-child(odd) {background: #b8faf0;}

// Bootstrap's Well Color Layout:
.Lindi {background: #b8faf0;} // Div Example class="well well-sm Fuqua"
.Fuqua {background: #70f5e0;} // Pre Example class="Lindi"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Lindi"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Memphis, TNJanina FranklinDeveloperEmisphere Technol#70f5e0
Little Rock, ARCaspar GrantProgrammerTJ International Inc.#b8faf0
Dallas, TXLinette JohnsonDeveloperTetra Technologies Inc.#70f5e0
Billings, MTBrew GalushaProgrammerNuevo Energy Co.#b8faf0