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


Your CSS panel code for this would be:

.panel-default > .card-header-Janet {
background-image: none;
background: #22cc88;
color: white;
}

.Janet tr:nth-child(even) {background: #7ae0b8;}
.Janet tr:nth-child(odd) {background: #bdf0db;}

// Bootstrap's Well Color Layout:
.Janet {background: #bdf0db;} // Div Example class="well well-sm Fritz"
.Fritz {background: #7ae0b8;} // Pre Example class="Janet"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Janet"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
San Francisco, CAJoscelin FarrarInventory ControlSCI Systems Inc.#7ae0b8
Dallas, TXLesli GriswoldBusiness and Operations AnalystUniversal Health Services#bdf0db
Las Vegas, NVJulia McCabeInventory Control3Com#7ae0b8
Little Rock, ARLeila FinneyBusiness and Operations AnalystUniphase#bdf0db

Random Bootstrap Panels Color: Mike


Your CSS panel code for this would be:

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

.Mike tr:nth-child(even) {background: #ebe0ff;}
.Mike tr:nth-child(odd) {background: #f5f0ff;}

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

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Mike"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
San Francisco, CAJoscelin FarrarInventory ControlSCI Systems Inc.#ebe0ff
Dallas, TXLesli GriswoldBusiness and Operations AnalystUniversal Health Services#f5f0ff
Las Vegas, NVJulia McCabeInventory Control3Com#ebe0ff
Little Rock, ARLeila FinneyBusiness and Operations AnalystUniphase#f5f0ff

Random Bootstrap Panels Color: Jeana


Your CSS panel code for this would be:

.panel-default > .card-header-Jeana {
background-image: none;
background: #22bb77;
color: white;
}

.Jeana tr:nth-child(even) {background: #7ad6ad;}
.Jeana tr:nth-child(odd) {background: #bdebd6;}

// Bootstrap's Well Color Layout:
.Jeana {background: #bdebd6;} // Div Example class="well well-sm Gorrell"
.Gorrell {background: #7ad6ad;} // Pre Example class="Jeana"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Jeana"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
San Francisco, CAJoscelin FarrarInventory ControlSCI Systems Inc.#7ad6ad
Dallas, TXLesli GriswoldBusiness and Operations AnalystUniversal Health Services#bdebd6
Las Vegas, NVJulia McCabeInventory Control3Com#7ad6ad
Little Rock, ARLeila FinneyBusiness and Operations AnalystUniphase#bdebd6

Random Bootstrap Panels Color: Joscelin


Your CSS panel code for this would be:

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

.Joscelin tr:nth-child(even) {background: #d6857a;}
.Joscelin tr:nth-child(odd) {background: #ebc2bd;}

// Bootstrap's Well Color Layout:
.Joscelin {background: #ebc2bd;} // Div Example class="well well-sm Farrar"
.Farrar {background: #d6857a;} // Pre Example class="Joscelin"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Joscelin"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
San Francisco, CAJoscelin FarrarInventory ControlSCI Systems Inc.#d6857a
Dallas, TXLesli GriswoldBusiness and Operations AnalystUniversal Health Services#ebc2bd
Las Vegas, NVJulia McCabeInventory Control3Com#d6857a
Little Rock, ARLeila FinneyBusiness and Operations AnalystUniphase#ebc2bd

Random Bootstrap Panels Color: Lesli


Your CSS panel code for this would be:

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

.Lesli tr:nth-child(even) {background: #ffa38f;}
.Lesli tr:nth-child(odd) {background: #ffd1c7;}

// Bootstrap's Well Color Layout:
.Lesli {background: #ffd1c7;} // Div Example class="well well-sm Griswold"
.Griswold {background: #ffa38f;} // Pre Example class="Lesli"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Lesli"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
San Francisco, CAJoscelin FarrarInventory ControlSCI Systems Inc.#ffa38f
Dallas, TXLesli GriswoldBusiness and Operations AnalystUniversal Health Services#ffd1c7
Las Vegas, NVJulia McCabeInventory Control3Com#ffa38f
Little Rock, ARLeila FinneyBusiness and Operations AnalystUniphase#ffd1c7

Random Bootstrap Panels Color: Julia


Your CSS panel code for this would be:

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

.Julia tr:nth-child(even) {background: #e0d6b8;}
.Julia tr:nth-child(odd) {background: #f0ebdb;}

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

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Julia"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
San Francisco, CAJoscelin FarrarInventory ControlSCI Systems Inc.#e0d6b8
Dallas, TXLesli GriswoldBusiness and Operations AnalystUniversal Health Services#f0ebdb
Las Vegas, NVJulia McCabeInventory Control3Com#e0d6b8
Little Rock, ARLeila FinneyBusiness and Operations AnalystUniphase#f0ebdb

Random Bootstrap Panels Color: Leila


Your CSS panel code for this would be:

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

.Leila tr:nth-child(even) {background: #d68585;}
.Leila tr:nth-child(odd) {background: #ebc2c2;}

// Bootstrap's Well Color Layout:
.Leila {background: #ebc2c2;} // Div Example class="well well-sm Finney"
.Finney {background: #d68585;} // Pre Example class="Leila"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Leila"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
San Francisco, CAJoscelin FarrarInventory ControlSCI Systems Inc.#d68585
Dallas, TXLesli GriswoldBusiness and Operations AnalystUniversal Health Services#ebc2c2
Las Vegas, NVJulia McCabeInventory Control3Com#d68585
Little Rock, ARLeila FinneyBusiness and Operations AnalystUniphase#ebc2c2

Random Bootstrap Panels Color: Janine


Your CSS panel code for this would be:

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

.Janine tr:nth-child(even) {background: #857ad6;}
.Janine tr:nth-child(odd) {background: #c2bdeb;}

// Bootstrap's Well Color Layout:
.Janine {background: #c2bdeb;} // Div Example class="well well-sm Fay"
.Fay {background: #857ad6;} // Pre Example class="Janine"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Janine"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
San Francisco, CAJoscelin FarrarInventory ControlSCI Systems Inc.#857ad6
Dallas, TXLesli GriswoldBusiness and Operations AnalystUniversal Health Services#c2bdeb
Las Vegas, NVJulia McCabeInventory Control3Com#857ad6
Little Rock, ARLeila FinneyBusiness and Operations AnalystUniphase#c2bdeb

Random Bootstrap Panels Color: Caz


Your CSS panel code for this would be:

.panel-default > .card-header-Caz {
background-image: none;
background: #99cccc;
color: black;
}

.Caz tr:nth-child(even) {background: #c2e0e0;}
.Caz tr:nth-child(odd) {background: #e0f0f0;}

// Bootstrap's Well Color Layout:
.Caz {background: #e0f0f0;} // Div Example class="well well-sm Grey"
.Grey {background: #c2e0e0;} // Pre Example class="Caz"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Caz"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
San Francisco, CAJoscelin FarrarInventory ControlSCI Systems Inc.#c2e0e0
Dallas, TXLesli GriswoldBusiness and Operations AnalystUniversal Health Services#e0f0f0
Las Vegas, NVJulia McCabeInventory Control3Com#c2e0e0
Little Rock, ARLeila FinneyBusiness and Operations AnalystUniphase#e0f0f0

Random Bootstrap Panels Color: Jeff


Your CSS panel code for this would be:

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

.Jeff tr:nth-child(even) {background: #e06670;}
.Jeff tr:nth-child(odd) {background: #f0b3b8;}

// Bootstrap's Well Color Layout:
.Jeff {background: #f0b3b8;} // Div Example class="well well-sm Goddard"
.Goddard {background: #e06670;} // Pre Example class="Jeff"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Jeff"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
San Francisco, CAJoscelin FarrarInventory ControlSCI Systems Inc.#e06670
Dallas, TXLesli GriswoldBusiness and Operations AnalystUniversal Health Services#f0b3b8
Las Vegas, NVJulia McCabeInventory Control3Com#e06670
Little Rock, ARLeila FinneyBusiness and Operations AnalystUniphase#f0b3b8

Random Bootstrap Panels Color: Jackelyn


Your CSS panel code for this would be:

.panel-default > .card-header-Jackelyn {
background-image: none;
background: #1100ee;
color: white;
}

.Jackelyn tr:nth-child(even) {background: #7066f5;}
.Jackelyn tr:nth-child(odd) {background: #b8b3fa;}

// Bootstrap's Well Color Layout:
.Jackelyn {background: #b8b3fa;} // Div Example class="well well-sm Fry"
.Fry {background: #7066f5;} // Pre Example class="Jackelyn"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Jackelyn"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
San Francisco, CAJoscelin FarrarInventory ControlSCI Systems Inc.#7066f5
Dallas, TXLesli GriswoldBusiness and Operations AnalystUniversal Health Services#b8b3fa
Las Vegas, NVJulia McCabeInventory Control3Com#7066f5
Little Rock, ARLeila FinneyBusiness and Operations AnalystUniphase#b8b3fa

Random Bootstrap Panels Color: Leanna


Your CSS panel code for this would be:

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

.Leanna tr:nth-child(even) {background: #ad998f;}
.Leanna tr:nth-child(odd) {background: #d6ccc7;}

// Bootstrap's Well Color Layout:
.Leanna {background: #d6ccc7;} // Div Example class="well well-sm Fales"
.Fales {background: #ad998f;} // Pre Example class="Leanna"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Leanna"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
San Francisco, CAJoscelin FarrarInventory ControlSCI Systems Inc.#ad998f
Dallas, TXLesli GriswoldBusiness and Operations AnalystUniversal Health Services#d6ccc7
Las Vegas, NVJulia McCabeInventory Control3Com#ad998f
Little Rock, ARLeila FinneyBusiness and Operations AnalystUniphase#d6ccc7

Random Bootstrap Panels Color: Boris


Your CSS panel code for this would be:

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

.Boris tr:nth-child(even) {background: #cc8fe0;}
.Boris tr:nth-child(odd) {background: #e6c7f0;}

// Bootstrap's Well Color Layout:
.Boris {background: #e6c7f0;} // Div Example class="well well-sm Hale"
.Hale {background: #cc8fe0;} // Pre Example class="Boris"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Boris"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
San Francisco, CAJoscelin FarrarInventory ControlSCI Systems Inc.#cc8fe0
Dallas, TXLesli GriswoldBusiness and Operations AnalystUniversal Health Services#e6c7f0
Las Vegas, NVJulia McCabeInventory Control3Com#cc8fe0
Little Rock, ARLeila FinneyBusiness and Operations AnalystUniphase#e6c7f0

Random Bootstrap Panels Color: Jillian


Your CSS panel code for this would be:

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

.Jillian tr:nth-child(even) {background: #7ab885;}
.Jillian tr:nth-child(odd) {background: #bddbc2;}

// Bootstrap's Well Color Layout:
.Jillian {background: #bddbc2;} // Div Example class="well well-sm Gorsline"
.Gorsline {background: #7ab885;} // Pre Example class="Jillian"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Jillian"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
San Francisco, CAJoscelin FarrarInventory ControlSCI Systems Inc.#7ab885
Dallas, TXLesli GriswoldBusiness and Operations AnalystUniversal Health Services#bddbc2
Las Vegas, NVJulia McCabeInventory Control3Com#7ab885
Little Rock, ARLeila FinneyBusiness and Operations AnalystUniphase#bddbc2

Random Bootstrap Panels Color: Jackqueline


Your CSS panel code for this would be:

.panel-default > .card-header-Jackqueline {
background-image: none;
background: #2233ee;
color: white;
}

.Jackqueline tr:nth-child(even) {background: #7a85f5;}
.Jackqueline tr:nth-child(odd) {background: #bdc2fa;}

// Bootstrap's Well Color Layout:
.Jackqueline {background: #bdc2fa;} // Div Example class="well well-sm Gassett"
.Gassett {background: #7a85f5;} // Pre Example class="Jackqueline"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Jackqueline"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
San Francisco, CAJoscelin FarrarInventory ControlSCI Systems Inc.#7a85f5
Dallas, TXLesli GriswoldBusiness and Operations AnalystUniversal Health Services#bdc2fa
Las Vegas, NVJulia McCabeInventory Control3Com#7a85f5
Little Rock, ARLeila FinneyBusiness and Operations AnalystUniphase#bdc2fa