Random Color Generator for Bootstrap Cards!!

BootStrap 4.4

Cards

Random Content

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


Your CSS Card code for this would be:

.card-default > .card-header-Janela {
background-image: none;
background: #9911bb;
color: white;
}

.Janela tr:nth-child(even) {background: #c270d6;}
.Janela tr:nth-child(odd) {background: #e0b8eb;}

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

Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Janela"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>

Boston, MA	Laurella Johnson	Programmer	Leggett & Platt Inc.	#c270d6
Dallas, TX	Brennan Gassett	Project Manager	Fannie Mae	#e0b8eb
Orlando, FL	Brendis Gratte	Programmer	Tiffany & Co.	#c270d6
Seattle, WA	Janka Graham	Project Manager	Triton Energy	#e0b8eb

Random Bootstrap Panels Color: Jordana


Your CSS Card code for this would be:

.card-default > .card-header-Jordana {
background-image: none;
background: #88bb77;
color: black;
}

.Jordana tr:nth-child(even) {background: #b8d6ad;}
.Jordana tr:nth-child(odd) {background: #dbebd6;}

// Bootstrap's Well Color Layout:
.Jordana {background: #dbebd6;} // Div Example class="well well-sm Grammer"
.Grammer {background: #b8d6ad;} // Pre Example class="Jordana"

Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Jordana"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>

Boston, MA	Laurella Johnson	Programmer	Leggett & Platt Inc.	#b8d6ad
Dallas, TX	Brennan Gassett	Project Manager	Fannie Mae	#dbebd6
Orlando, FL	Brendis Gratte	Programmer	Tiffany & Co.	#b8d6ad
Seattle, WA	Janka Graham	Project Manager	Triton Energy	#dbebd6

Random Bootstrap Panels Color: Lenora


Your CSS Card code for this would be:

.card-default > .card-header-Lenora {
background-image: none;
background: #116644;
color: white;
}

.Lenora tr:nth-child(even) {background: #70a38f;}
.Lenora tr:nth-child(odd) {background: #b8d1c7;}

// Bootstrap's Well Color Layout:
.Lenora {background: #b8d1c7;} // Div Example class="well well-sm Goodwin"
.Goodwin {background: #70a38f;} // Pre Example class="Lenora"

Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Lenora"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>

Boston, MA	Laurella Johnson	Programmer	Leggett & Platt Inc.	#70a38f
Dallas, TX	Brennan Gassett	Project Manager	Fannie Mae	#b8d1c7
Orlando, FL	Brendis Gratte	Programmer	Tiffany & Co.	#70a38f
Seattle, WA	Janka Graham	Project Manager	Triton Energy	#b8d1c7

Random Bootstrap Panels Color: Laurella


Your CSS Card code for this would be:

.card-default > .card-header-Laurella {
background-image: none;
background: #aa1100;
color: white;
}

.Laurella tr:nth-child(even) {background: #cc7066;}
.Laurella tr:nth-child(odd) {background: #e6b8b3;}

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

Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Laurella"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>

Boston, MA	Laurella Johnson	Programmer	Leggett & Platt Inc.	#cc7066
Dallas, TX	Brennan Gassett	Project Manager	Fannie Mae	#e6b8b3
Orlando, FL	Brendis Gratte	Programmer	Tiffany & Co.	#cc7066
Seattle, WA	Janka Graham	Project Manager	Triton Energy	#e6b8b3

Random Bootstrap Panels Color: Brennan


Your CSS Card code for this would be:

.card-default > .card-header-Brennan {
background-image: none;
background: #00eeff;
color: black;
}

.Brennan tr:nth-child(even) {background: #66f5ff;}
.Brennan tr:nth-child(odd) {background: #b3faff;}

// Bootstrap's Well Color Layout:
.Brennan {background: #b3faff;} // Div Example class="well well-sm Gassett"
.Gassett {background: #66f5ff;} // Pre Example class="Brennan"

Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Brennan"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>

Boston, MA	Laurella Johnson	Programmer	Leggett & Platt Inc.	#66f5ff
Dallas, TX	Brennan Gassett	Project Manager	Fannie Mae	#b3faff
Orlando, FL	Brendis Gratte	Programmer	Tiffany & Co.	#66f5ff
Seattle, WA	Janka Graham	Project Manager	Triton Energy	#b3faff

Random Bootstrap Panels Color: Brendis


Your CSS Card code for this would be:

.card-default > .card-header-Brendis {
background-image: none;
background: #aa3344;
color: white;
}

.Brendis tr:nth-child(even) {background: #cc858f;}
.Brendis tr:nth-child(odd) {background: #e6c2c7;}

// Bootstrap's Well Color Layout:
.Brendis {background: #e6c2c7;} // Div Example class="well well-sm Gratte"
.Gratte {background: #cc858f;} // Pre Example class="Brendis"

Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Brendis"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>

Boston, MA	Laurella Johnson	Programmer	Leggett & Platt Inc.	#cc858f
Dallas, TX	Brennan Gassett	Project Manager	Fannie Mae	#e6c2c7
Orlando, FL	Brendis Gratte	Programmer	Tiffany & Co.	#cc858f
Seattle, WA	Janka Graham	Project Manager	Triton Energy	#e6c2c7

Random Bootstrap Panels Color: Janka


Your CSS Card code for this would be:

.card-default > .card-header-Janka {
background-image: none;
background: #aa7722;
color: white;
}

.Janka tr:nth-child(even) {background: #ccad7a;}
.Janka tr:nth-child(odd) {background: #e6d6bd;}

// Bootstrap's Well Color Layout:
.Janka {background: #e6d6bd;} // Div Example class="well well-sm Graham"
.Graham {background: #ccad7a;} // Pre Example class="Janka"

Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Janka"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>

Boston, MA	Laurella Johnson	Programmer	Leggett & Platt Inc.	#ccad7a
Dallas, TX	Brennan Gassett	Project Manager	Fannie Mae	#e6d6bd
Orlando, FL	Brendis Gratte	Programmer	Tiffany & Co.	#ccad7a
Seattle, WA	Janka Graham	Project Manager	Triton Energy	#e6d6bd

Random Bootstrap Panels Color: Linn


Your CSS Card code for this would be:

.card-default > .card-header-Linn {
background-image: none;
background: #229977;
color: white;
}

.Linn tr:nth-child(even) {background: #7ac2ad;}
.Linn tr:nth-child(odd) {background: #bde0d6;}

// Bootstrap's Well Color Layout:
.Linn {background: #bde0d6;} // Div Example class="well well-sm Giles"
.Giles {background: #7ac2ad;} // Pre Example class="Linn"

Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Linn"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>

Boston, MA	Laurella Johnson	Programmer	Leggett & Platt Inc.	#7ac2ad
Dallas, TX	Brennan Gassett	Project Manager	Fannie Mae	#bde0d6
Orlando, FL	Brendis Gratte	Programmer	Tiffany & Co.	#7ac2ad
Seattle, WA	Janka Graham	Project Manager	Triton Energy	#bde0d6

Random Bootstrap Panels Color: Lettie


Your CSS Card code for this would be:

.card-default > .card-header-Lettie {
background-image: none;
background: #00ff00;
color: white;
}

.Lettie tr:nth-child(even) {background: #66ff66;}
.Lettie tr:nth-child(odd) {background: #b3ffb3;}

// Bootstrap's Well Color Layout:
.Lettie {background: #b3ffb3;} // Div Example class="well well-sm Godspeed"
.Godspeed {background: #66ff66;} // Pre Example class="Lettie"

Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Lettie"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>

Boston, MA	Laurella Johnson	Programmer	Leggett & Platt Inc.	#66ff66
Dallas, TX	Brennan Gassett	Project Manager	Fannie Mae	#b3ffb3
Orlando, FL	Brendis Gratte	Programmer	Tiffany & Co.	#66ff66
Seattle, WA	Janka Graham	Project Manager	Triton Energy	#b3ffb3

Random Bootstrap Panels Color: Leigh


Your CSS Card code for this would be:

.card-default > .card-header-Leigh {
background-image: none;
background: #dd77dd;
color: black;
}

.Leigh tr:nth-child(even) {background: #ebadeb;}
.Leigh tr:nth-child(odd) {background: #f5d6f5;}

// Bootstrap's Well Color Layout:
.Leigh {background: #f5d6f5;} // Div Example class="well well-sm Gill"
.Gill {background: #ebadeb;} // Pre Example class="Leigh"

Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Leigh"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>

Boston, MA	Laurella Johnson	Programmer	Leggett & Platt Inc.	#ebadeb
Dallas, TX	Brennan Gassett	Project Manager	Fannie Mae	#f5d6f5
Orlando, FL	Brendis Gratte	Programmer	Tiffany & Co.	#ebadeb
Seattle, WA	Janka Graham	Project Manager	Triton Energy	#f5d6f5

Random Bootstrap Panels Color: Janith


Your CSS Card code for this would be:

.card-default > .card-header-Janith {
background-image: none;
background: #ff88ff;
color: black;
}

.Janith tr:nth-child(even) {background: #ffb8ff;}
.Janith tr:nth-child(odd) {background: #ffdbff;}

// Bootstrap's Well Color Layout:
.Janith {background: #ffdbff;} // Div Example class="well well-sm Tittle"
.Tittle {background: #ffb8ff;} // Pre Example class="Janith"

Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Janith"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>

Boston, MA	Laurella Johnson	Programmer	Leggett & Platt Inc.	#ffb8ff
Dallas, TX	Brennan Gassett	Project Manager	Fannie Mae	#ffdbff
Orlando, FL	Brendis Gratte	Programmer	Tiffany & Co.	#ffb8ff
Seattle, WA	Janka Graham	Project Manager	Triton Energy	#ffdbff

Random Bootstrap Panels Color: Brock


Your CSS Card code for this would be:

.card-default > .card-header-Brock {
background-image: none;
background: #aaddee;
color: black;
}

.Brock tr:nth-child(even) {background: #ccebf5;}
.Brock tr:nth-child(odd) {background: #e6f5fa;}

// Bootstrap's Well Color Layout:
.Brock {background: #e6f5fa;} // Div Example class="well well-sm Gorrell"
.Gorrell {background: #ccebf5;} // Pre Example class="Brock"

Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Brock"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>

Boston, MA	Laurella Johnson	Programmer	Leggett & Platt Inc.	#ccebf5
Dallas, TX	Brennan Gassett	Project Manager	Fannie Mae	#e6f5fa
Orlando, FL	Brendis Gratte	Programmer	Tiffany & Co.	#ccebf5
Seattle, WA	Janka Graham	Project Manager	Triton Energy	#e6f5fa

Random Bootstrap Panels Color: Jillian


Your CSS Card code for this would be:

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

.Jillian tr:nth-child(even) {background: #d69985;}
.Jillian tr:nth-child(odd) {background: #ebccc2;}

// Bootstrap's Well Color Layout:
.Jillian {background: #ebccc2;} // Div Example class="well well-sm Farnam"
.Farnam {background: #d69985;} // Pre Example class="Jillian"

Your HTML card 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>

Boston, MA	Laurella Johnson	Programmer	Leggett & Platt Inc.	#d69985
Dallas, TX	Brennan Gassett	Project Manager	Fannie Mae	#ebccc2
Orlando, FL	Brendis Gratte	Programmer	Tiffany & Co.	#d69985
Seattle, WA	Janka Graham	Project Manager	Triton Energy	#ebccc2

Random Bootstrap Panels Color: Blake


Your CSS Card code for this would be:

.card-default > .card-header-Blake {
background-image: none;
background: #77aa77;
color: black;
}

.Blake tr:nth-child(even) {background: #adccad;}
.Blake tr:nth-child(odd) {background: #d6e6d6;}

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

Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Blake"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>

Boston, MA	Laurella Johnson	Programmer	Leggett & Platt Inc.	#adccad
Dallas, TX	Brennan Gassett	Project Manager	Fannie Mae	#d6e6d6
Orlando, FL	Brendis Gratte	Programmer	Tiffany & Co.	#adccad
Seattle, WA	Janka Graham	Project Manager	Triton Energy	#d6e6d6

Random Bootstrap Panels Color: Lillian


Your CSS Card code for this would be:

.card-default > .card-header-Lillian {
background-image: none;
background: #aabbcc;
color: black;
}

.Lillian tr:nth-child(even) {background: #ccd6e0;}
.Lillian tr:nth-child(odd) {background: #e6ebf0;}

// Bootstrap's Well Color Layout:
.Lillian {background: #e6ebf0;} // Div Example class="well well-sm Giddings"
.Giddings {background: #ccd6e0;} // Pre Example class="Lillian"

Your HTML card code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Lillian"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>

Boston, MA	Laurella Johnson	Programmer	Leggett & Platt Inc.	#ccd6e0
Dallas, TX	Brennan Gassett	Project Manager	Fannie Mae	#e6ebf0
Orlando, FL	Brendis Gratte	Programmer	Tiffany & Co.	#ccd6e0
Seattle, WA	Janka Graham	Project Manager	Triton Energy	#e6ebf0

cryan.com

Create some cool looking Boostrap Cards