I'm currently in the process of learning Bootstrap, and I've encountered an issue with the height attribute in version 4 (for example: "row h-25") not functioning properly.
I attempted to add another CSS rule that sets the height of "container-fluid", as well as html and body elements to 100%, which was suggested as a solution by someone else. Unfortunately, this did not resolve the problem. Upon checking in Visual Studio under "NuGet - Solution", it shows that the bootstrap version being used is 'v4.0.0-alpha'.
Any assistance on this matter would be highly appreciated.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/custom.css" rel="stylesheet" />
<script src="scripts/angular.min.js"></script>
</head>
<body>
<div class="container-fluid" style="background-color: #e7fdd6">
<div class="row h-25" style="background-color: #eee">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"><p>Customer</p><!-- These are just rough drafts while I learn the grid system. --></div>
<div class="col-md-3 col-lg-3 hidden-xs hidden-sm"><p>Power</p></div>
<div class="col-md-3 col-lg-3 hidden-xs hidden-sm"><p>Panels</p></div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"><p>Projects</p></div>
</div>
<div class="row h-25" style="background-color: #eee">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"><p>Customer-slider</p></div>
<div class="col-md-3 col-lg-3 hidden-xs hidden-sm"><p>Power amount</p></div>
<div class="col-md-3 col-lg-3 hidden-xs hidden-sm"><p>Panels</p></div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"><p>Projects-slider</p></div>
</div>
<div class="row h-25">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><img src="Content/picture.jpg" alt="Park" align="middle" /> <!-- Image --></div>
</div>
<div class="row h-25">
<div class="col-lg-6 col-md-6-col-sm-12 col-xs-12"><!-- Graph 1 --></div>
<div class="col-lg-6 col-md-6 hidden-sm hidden-xs"><!-- Graph 2 --></div>
</div>
</div>
</body>
</html>
custom.css:
.container-fluid {
height: 100%;
}
html, body {
height: 100%;
}