customize bootstrap panel

I try to customize a bootstrap panel. I do not understand why does not work panel-footer after pane-body and panel-header?

the code:

<!DOCTYPE html>
<html lang=“en”>
<title>Bootstrap Example</title>
<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
<link rel=“stylesheet” href=“”>
<script src=“”></script>
<script src=“”></script>
.panel-custom-red {
border-color: #ff0000;

.panel-custom-red > .panel-heading {
background-color: #ff0000;
color: #ffffff;
border-color: #ff0000;
.custom-body {
background-color: lightgreen;
.custom-body > .panel-body {
color: green;
.custom-footer {
background-color: lightblue;
.custom-footer > .panel-footer {
color: blue;

<div class=“container”>
<h2>Panel Heading</h2>
<div class=“panel panel-default panel-custom-red custom-body custom-footer”>
<div class=“panel-heading”>Panel Heading</div>
<div class=“panel-body”>Panel Content</div>
<div class=“panel-footer”>Panel Footer</div>


Sharing a JSFiddle or putting your code in a code block helps people understand:

Regarding your question: could you describe what you’re trying to achieve?


Try this theme available on  github

thanking you.



it is  nice, is there a downloadable version? I would like to learn more about it.

thank you


I would like to change coloure of a bootstrap panel, overriding default parameters.

I have another problem, using this code:

        $("#div7").width() + “</br>”;
  if ($("#swansea").width() < $("#swansea").height()) {
  } else {

I need to touch viewport, window to make this code to work. I would like to work it right away as it is loaded, just

as I give a value: …width(200);

thank you

you are not defining the class correctly in the  CSS stylesheet makesure to write the exact name of class which you have described in the html portion.