Tips for implementing a minimum height for a Bootstrap row

I am facing an issue with setting the min-height of a row in Bootstrap. I would like the min-height of my row to be equal to that of the parent element, as shown below:

body {
  height: 100%;
}

.header {
  height: 30px;
}

.footer {
  height: 100px;
}
<div class="container">
  <div class="row header bg-primary">
    <div class="col-6">Title item</div>
    <div class="col-2">Title item</div>
    <div class="col-2">Title item</div>
    <div class="col-2">Title item</div>
  </div>
  <div class="row h-100 body bg-success">
    <div class="col-12 h-100">
      <div class="row">
        <div class="col-6">item 1</div>
        <div class="col-2">item 1</div>
        <div class="col-2">item 1</div>
        <div class="col-2">item 1</div>
      </div>
      <div class="row">
        <div class="col-6">item a</div>
        <div class="col-2">item a</div>
        <div class="col-2">item a</div>
        <div class="col-2">item a</div>
      </div>
    </div>
  </div>
  <div class="row footer bg-danger">
    <div class="col-12"></div>
  </div>
</div>

In the example above, I aim to have the "body" class with a min-height of 100% to cover the entire height of the parent element.

htmlcssbootstrap-4

Answer №1

To achieve a responsive layout, you can utilize flex classes where flex-grow-1 instructs the content row to expand and fill the available space.

.footer {
    min-height: 100px;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8d80809b9c9b9d8e9fafdbc1dac1dc">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container min-vh-100 d-flex flex-column">
    <div class="row header bg-primary">
        <div class="col-6">Title item</div>
        <div class="col-2">Title item</div>
        <div class="col-2">Title item</div>
        <div class="col-2">Title item</div>
    </div>
    <div class="row bg-success flex-grow-1">
        <div class="col-12 h-100">
            <div class="row">
                <div class="col-6">item 1</div>
                <div class="col-2">item 2</div>
                <div class="col-2">item 3</div>
                <div class="col-2">item 4</div>
            </div>
            <div class="row">
                <div class="col-6">item a</div>
                <div class="col-2">item b</div>
                <div class="col-2">item c</div>
                <div class="col-2">item d</div>
            </div>
        </div>
    </div>
    <div class="row footer bg-danger">
        <div class="col-12"></div>
    </div>
</div>

If your goal is to make the content fill the page's remaining space while allowing scrolling within the green area if it overflows, you can use the `flex-grow-1` property in the CSS styling and set `overflow-y: scroll;` as seen in the code snippet below:

.footer {
    min-height: 100px;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd9f9292898e898f9c8dbdc9d3c8d3ce">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container vh-100 d-flex flex-column">
    <div class="row header bg-primary">
        <div class="col-6">Title item</div>
        <div class="col-2">Title item</div>
        <div class="col-2">Title item</div>
        <div class="col-2">Title item</div>
    </div>
    <div class="row bg-success flex-grow-1" style="overflow-y: scroll;">
        <div class="col-12 h-100">
            <div class="row">
                <div class="col-6">item 1</div>
                <div class="col-2">item 2</div>
                <div class="col-2">item 3</div>
                <div class="col-2">item 4</div>
            </div>
            <!-- Additional rows with items go here -->
        </div>
    </div>
    <div class="row footer bg-danger">
        <div class="col-12"></div>
    </div>
</div>

Answer №2

By using the provided CSS code, all rows with the class "row-equal-height" will have equal heights.

   body {
     height:100%;
   }

   .footer {
      height:100px;
    }
    
.row-equal-height{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
             <div class="container">
          <div class="row row-equal-height   bg-primary">
              <div class="col-6">Title item</div>
              <div class="col-2">Title item</div>
              <div class="col-2">Title item</div>
              <div class="col-2">Title item</div>
          </div>
          <div class="row  row-equal-height  h-100 body bg-success">
              <div class=" col-12 h-100">
                  <div class="row">
                    <div class="col-6">item 1</div>
                    <div class="col-2">item 2</div>
                    <div class="col-2">item 3</div>
                    <div class="col-2">item 4</div>
                  </div>
                  <div class="row">
                    <div class="col-6">item a</div>
                    <div class="col-2">item b</div>
                    <div class="col-2">item c</div>
                    <div class="col-2">item d</div>
                  </div>
              </div>
          </div>
          <div class="row footer bg-danger">
            <div class="col-12"></div>
          </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>

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

Navigating through Ruby on Rails' index routes

I have set up an index for the object "request". Each request has an address and a body. I configured the index to display the address as a link, with the intention of directing users to the show page of that specific object. However, when I click on the l ...

htmlruby-on-railsruby

When I click the toggler button, the collapse menu fails to close

I created a responsive menu using Bootstrap 4.0.0. The collapsible menu works by opening when clicked, however, it does not close when clicked again. Here is the code: html: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a href ...

javascripthtmlcssbootstrap-4

Mysterious sayings encircling the words fetched through ajax

If the localhost is pointing to the folder named www, where the structure looks like: www/ file/test.cpp index.html I want to dynamically load the content of test.cpp into index.html and display it with the help of highlight.js. Below is the cod ...

javascriptjqueryhtmlajax

The position of a jQuery element gets reset when both the show and stop animations are used

When I use jQuery's .position() to place an element, everything works fine. But as soon as I display an animation and then cancel it with an ajax call, the position of the element resets. function displayMessage(msg) { var $messageEl = $('#u ...

javascriptcssjquery-uijquery

Retrieve the chosen option within the current page

Currently, I am working with a select button on my webpage: <form method="post"> <label> <select id="label" name="challengeX" style="margin-top:150px;"> <option selected value="0"> Global Statistics </opt ...

phphtmlselect

Checkboxes within Angular's reactive forms are a powerful tool for creating dynamic user

Currently, I am working on a contact form that includes checkboxes for users to select multiple options, with the requirement of selecting at least one box. My challenge lies in figuring out how to pass all the selected checkboxes' data to an API usin ...

htmlarraysangulartypescriptforms

Numerous inline notations in html code

I need help figuring out how to prevent a hyperlink from opening a new tab by commenting out the HTML code. <a href="<!--http://www.google.com=-->" target="_blank" onclick="javascript:alert('Navigation Prevented')">CLICK HERE FOR GOO ...

javascripthtmlcsscomments

What is the best way to download a modified canvas with filters using the solutions from stackoverflow?

There have been numerous inquiries regarding how to apply CSS filters to an image, with some solutions that don't utilize CSS filters but still achieve the desired outcome. However, for someone new to JavaScript like myself, these answers can be confu ...

javascripthtmlcsscanvascss-filters

Learn to create customized HTML elements in HTML and control them with JavaScript

I am looking to dynamically create an HTML object and replicate it N number of times using JavaScript. Below is an example of the object I want to generate multiple times on an HTML page: <div class="row"> <div class="column" style="backgroun ...

javascripthtml

Utilizing a JavaScript Function on an HTML Page Through an External JavaScript File

I am facing a challenge with JavaScript functions in my HTML page. I have one function that returns a value, and I need to catch this value in another JavaScript function located in an external file linked to the HTML page. Can someone guide me on how to a ...

javascripthtmlajaxgoogle-analytics

Unlocking the power of AJAX to retrieve PHP responses

Is it possible to have a PHP response displayed within a <span>..</span> on an HTML web page? If so, can someone guide me on how to achieve this or point out any issues with the existing code? Thank you in advance! ^^ <html> <head& ...

phphtmlajax

Examining the functionality of my PHP codes and forms

I'm currently working with two HTML forms and two PHP scripts. The first form is designed to save a user's email to a .txt file, while the second form is a Stripe payment form that processes payments using PHP code. However, I've encountere ...

phphtmlformstesting

What are the steps for utilizing a button instead of an input field that is not within a form?

I need assistance with setting up a navbar with a button that will submit a form in the body with the ID of album_form. Can anyone provide suggestions for what to include in the onclick attribute to achieve this functionality? <body> <header& ...

javascripthtmlforms

Creating a glassy appearance: What's the process?

I want to achieve a similar glass effect as shown in this screenshot here: (), but despite trying to adjust the opacity, I can't seem to get it right. Here's my code: .Head { position: absolute; top:200px; margin-left: 20%; c ...

cssstyles

Develop a custom script function for every instance of a @foreach loop

I have a challenge where I need to style automatically generated table rows by clicking on a button. Currently, my code appears as follows: @foreach($tours as $tour) <tr id="{{$tour->id}}"> <td> {{$tour->tournr}} &l ...

javascripthtmllaravel

Guide for Forwarding All Domain Requests to example.html

Is there a way to redirect all site files to a specific HTML file? ...

phphtmlhttp-redirect

What is the best way to retrieve the specific value?

I'm attempting to show the corresponding username and email from the database table (create_acc) on the individual's profile page. However, each time I run the code, it returns an error of undefined index:uname for username and undefined index:em ...

phphtmlsql

Discover the dimensions of the viewport using jQuery

I am currently attempting to use jQuery to determine the size of the viewport, but I am not achieving the desired results. Here is my CSS code: .site { max-width: 960px; } @media only screen and (min-width : 760px) and (max-width : 1040px) /* table ...

javascriptjqueryhtmlcss

Determining the existence of a file on a different domain using JavaScript

One of the key tasks I need to achieve from JavaScript on my HTML page is checking for the existence of specific files: http://www.example.com/media/files/file1.mp3 // exists http://www.example.com/media/files/file2.mp3 // doesn't exist Keep in mi ...

javascripthtmlhttp

Solving the issue of IE7 div overflow-y: scroll causing content to be obscured by the scrollbar

I am facing an issue with a table inside a div (#body) that scrolls along the y-axis. Specifically, in Internet Explorer, the scrollbar is hiding part of the last table cell behind it, causing a shift in the layout of the table columns. This problem does n ...

cssinternet-explorergoogle-chromevertical-scrolling