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”>
<head>
<title>Bootstrap Example</title>
<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
<link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>
<style>
.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;
}
</style>
</head>
<body>

<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>
</div>
</div>

</body>
</html>

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

https://jsfiddle.net/yut1q6ej/4/

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

Hi,

Try this theme available on  github

https://adminlte.io/themes/AdminLTE/index2.html

thanking you.

sandeep

Hi

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

thank you

Hi

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

I have another problem, using this code:

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

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.