Advertisements
I have the following code with 8 bootstrap row elements. I’d like them to have equal height such that the combined height of all rows is equal to the screen height and such that all the rows are always visible without scrolling. I tried setting the height for each row with h-100/50/25 etc and that works but the rows overflow the page. Setting a custom h- does not work. How can I achieve this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Equal rows</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="css/styles.css" rel="stylesheet">
</head>
<body class="text-center">
<div class="container-fluid vh-100">
<div class="row">
<div class="col-lg" style="background-color: lightcoral;">
<h3 style="color: white">lightcoral</h3>
</div>
</div>
<div class="row">
<div class="col-lg" style="background-color: indigo;">
<h3 style="color: white">indigo</h3>
</div>
</div>
<div class="row">
<div class="col-lg" style="background-color: red;">
<h3 style="color: white">red</h3>
</div>
</div>
<div class="row">
<div class="col-lg" style="background-color: lightseagreen;">
<h3 style="color: white">lightseagreen</h3>
</div>
</div>
<div class="row">
<div class="col-lg" style="background-color: green;">
<h3 style="color: white">green</h3>
</div>
</div>
<div class="row">
<div class="col-lg" style="background-color: yellow;">
<h3 style="color: white">yellow</h3>
</div>
</div>
<div class="row">
<div class="col-lg" style="background-color: purple;">
<h3 style="color: white">purple</h3>
</div>
</div>
<div class="row">
<div class="col-lg" style="background-color: orange;">
<h3 style="color: white">orange</h3>
</div>
</div>
</div>
</body>
</html>>Solution :
No need to put them all in separate rows.
Nest them all in one and use .h-100 with flex-column
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Equal rows</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="css/styles.css" rel="stylesheet">
</head>
<body class="text-center">
<div class="container-fluid vh-100">
<div class="row h-100 flex-column flex-nowrap">
<div class="col-lg col" style="background-color: lightcoral;">
<h3 style="color: white">lightcoral</h3>
</div>
<div class="col-lg col" style="background-color: indigo;">
<h3 style="color: white">indigo</h3>
</div>
<div class="col-lg col" style="background-color: red;">
<h3 style="color: white">red</h3>
</div>
<div class="col-lg col" style="background-color: lightseagreen;">
<h3 style="color: white">lightseagreen</h3>
</div>
<div class="col-lg col" style="background-color: green;">
<h3 style="color: white">green</h3>
</div>
<div class="col-lg col" style="background-color: yellow;">
<h3 style="color: white">yellow</h3>
</div>
<div class="col-lg col" style="background-color: purple;">
<h3 style="color: white">purple</h3>
</div>
<div class="col-lg col" style="background-color: orange;">
<h3 style="color: white">orange</h3>
</div>
</div>
</div>
</body>
</html>