Achieving equal height rows in Bootstrap to fill the page height

I'm facing a challenge with my code that consists of 8 bootstrap row elements. I want these rows to have equal height so that when combined, their height is equal to the screen height. Additionally, I need all the rows to be visible without any scrolling. I've tried setting the height for each row using h-100/50/25, but this results in the rows overflowing the page. Customizing the height also didn't work. Any suggestions on how I can 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bedcd1d1cacdcaccdfcefe8b908c908d">[email protected]</a>/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">;ightseagreen</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>

htmlcssbootstrap-5

Answer №1

Instead of spreading them out, consolidate all into a single container with the .h-100 and flex-column classes.

<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="52303d3d26212620332212677c607c61">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to blend a portion of an image into a div?

Having a bit of trouble with overlapping my image onto another div in my current project. When you take a look at what I've been working on, you'll see there's an image that says "That's me!" and it needs to overlap the left side div. I ...

htmlcssimageoverlap

The formgroup label is currently displayed in uppercase, but I would prefer it to be in title case

In the angular template below, I have noticed that even though the labels are in titlecase, they appear in uppercase when the page is rendered. This wasn't the desired outcome so I attempted to use the titlecase pipe and enclose the label text within ...

htmlcssangularlabel

Poor mapping on Google Maps API

I've been trying to embed a Google Maps on my website, but for some reason, it keeps stretching and showing grey sections with rounded borders. Here's the code I'm using: <div class="p-5 col-6 d-flex flex-column justify-content-between"& ...

htmlcssgoogle-mapsbootstrap-4

What is the best way to modify the size of a canvas element while maintaining effectiveness?

I've encountered an issue while using Canvas to create a pie chart with chart.js. Despite adjusting the dimensions of the canvas element, it continues to take up the entire page. <canvas id="myChart" height ="200" width="200"></can ...

javascripthtmlcanvaschart.jsdimensions

What is the functionality of ng-repeat in AngularJS when used outside the "jump" table?

Currently, I am in the process of constructing a layout using a table with nested ng-repeat. <div ng-controller="PresetManageController"> <table> <in-preset ng-repeat="preset in presetManage.presets"></in-preset> </table ...

javascripthtmlangularjs

When I click on my navbar toggle button, why isn't my text displaying?

I'm experiencing an issue with my navbar toggle. The toggle button works fine, but when I click on it, the text inside the button doesn't show up. I've checked the Bootstrap docs to make sure I didn't miss any steps, but I can't se ...

htmltogglebootstrap-5

Adjusting diagram size based on screen width using Bootstrap and jQuery

I recently created a diagram that adjusts its size according to the screen width. However, when I implemented this code on my page, I encountered an issue where the final circle or glyph would drop to the next line instead of staying on the same line as in ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to assign a unique name to a dynamically generated text box using jQuery

In an effort to name a dynamically created textbox based on a specific event, I attempted the following code. The function GenerateTextBox was intended to assign a name and value of "" to the textbox upon generation, however, the name did not get assigned ...

javascriptjqueryhtmlreturn-value

Android mobile browser lacks visibility of certain elements

please provide a brief description of the image The issue I am facing is consistent across all mobile browsers, with the exception of Firefox. It also manifests in Windows Chrome devtools mode and when the device toolbar is activated. I came across a sim ...

htmlcss

Tips for creating a horizontal bar with CSS using the float property

Looking to create a horizontal scroll layout using CSS and floats? Here's my attempt, but I'm not getting the desired result. Flexbox isn't an option as it needs to be supported on IE. Take a look at my code and point out where I might have ...

htmlcss

What is the reasoning behind setting the perspective to 1000 for carousel items in Bootstrap?

While working on customizing the bootstrap carousel, I came across this code snippet: .carousel-inner > .item { -webkit-transition: -webkit-transform .6s ease-in-out; -o-transition: -o-transform .6s ease-in-out; transit ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

Opacity in text shadow effect using CSS

Within my text lies the following css snippet: .text-description-header { font-size: 250%; color: white; text-shadow: 0 1px 0 black; } Observe the dark shadow effect it possesses. Inquiry I am curious if there is a way to alter the shadow t ...

htmlcss

Creating fluid designs for my boxes with CSS to enhance responsiveness

I have designed my HTML file with 8 boxes that appear correctly on desktop, but when viewed on mobile devices, the columns are misaligned and shifted to the right side instead of being centered. How can I make it more responsive? See Preview Here is the ...

css

Is it necessary to verify user input in a registration form using PHP?

I currently do not have any code to share, as the issue at hand is not directly related to coding. However, I am interested in verifying certain aspects of user input, such as ensuring a phone number entered in a registration form is limited to 8 digits an ...

phphtmlmysql

The image slide change feature ceases to function properly when incorporating two separate functions

I have a function that successfully changes the image of a container every 5 seconds. However, I am facing an issue when trying to add 2 containers side by side and change their images simultaneously. When I run the functions for both containers, only one ...

javascripthtmlcss

Choose the descendant element of the element that has a specific attribute

One of the issues I am facing is related to a button with a span tag inside for the text. Occasionally, this button might be disabled, and my goal is to have it appear grey when in that state. However, I am encountering difficulties making this work proper ...

csshtmlattributescss-selectors

Can someone explain why my button icons are not aligning to the center properly?

I have a small issue with the icons I pulled from react-icons - they appear slightly raised within the buttons. How can I position them in the middle? That's my only query, but I can't post it alone due to mostly having code in my post. What an ...

javascriptcssreactjs

Click the closest checkbox when the value equals the Jquery datatable

I am facing an issue where I need to add a class and click on a specific element in each row of my jQuery datatable if a certain value is equal. However, I am unable to successfully add the class to that element and trigger a click event. <table id="us ...

javascriptjqueryhtmlcss

Ensure that the submit button triggers the display of results with each click

My project involves two navigation bars, each with its own table displayed upon page load. Additionally, there is a search bar used to display search results in another table. The issue I'm encountering is that when I click the submit button once, th ...

javascriptjqueryhtml

There seems to be a problem with the responsive navigation menu when activated in responsive mode and then resizing the screen

Trying to create a responsive navigation but encountering issues when following these steps: 1. Resize the navigation to less than 940px 2. Activate the menu 3. Resize the browser again to more than 940px 4. The menu is no longer inline and appears messy ...

jqueryhtmlcssnavigationresponsive