What is the best way to dynamically resize row height in Bootstrap?

Currently, I'm delving into Bootstrap and facing a challenge of automatically adjusting row heights under specific conditions:

  • In a container-fluid, there are 3 rows
  • Row1 should accommodate the height of its content
  • Row3 needs to adjust to its content height and align at the bottom of the viewport
  • Row2 is expected to adapt its height to fill the space between Row1 and Row3 in the container-fluid
html, body, .container-fluid {
  height: 100%;
  background: lightyellow;
}

.col {
  border: solid 1px #6c757d;
}

.content-1 {
  height: 50px;
  background-color: lightcoral;
}

.content-2 {
  height: 200px;
    background-color: lightgreen;
}

.content-3 {
  height: 25px;
  background-color: lightblue;
}
<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="content-1">
      ROW 1 -> Height of its content
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="content-2">
      ROW 2 -> Height between row1 and row3 automatically adjusted
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="content-3">
      ROW 3 -> Height of its content
      </div>
    </div>
  </div>
</div>

View JSFiddle demo

I'd appreciate advice on the best approach to achieve this. Thanks a lot!

Answer №1

If you're searching for the flexbox utility classes, look no further. The d-flex class is used for display:flex, while flex-grow-1 will ensure that the 2nd child div fills the remaining height. Make sure to add flex-column if you desire a vertical layout.

<div class="container-fluid d-flex flex-column">
  <div class="row">
    <div class="col">
      <div class="content-1">
      ROW 1 -> Height of its content
      </div>
    </div>
  </div>
  <div class="row flex-fill">
    <div class="col d-flex flex-column">
      <div class="content-2 h-100">
      ROW 2 -> Height between row1 and row3 automatically adjusted
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="content-3">
      ROW 3 -> Height of its content
      </div>
    </div>
  </div>
</div>

Please note: The fixed heights defined in the custom CSS have been removed to allow the header/footer to adjust their height based on content, and for the content row to take up the remaining space.


Related:
Bootstrap 4: How to make the row stretch remaining height?
Bootstrap - Fill fluid container between header and footer

Answer №2

It appears that you are utilizing bootstrap 4. However, for those who rely on bootstrap 3 or choose not to utilize any CSS libraries, the following code could serve as a suitable solution:

.main-container{
   display: flex;
}
.sub-sections{
  display: flex;
}

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

Can the ~ and + selectors be combined simultaneously for styling elements?

Imagine a scenario where you have HTML code like this: <input type="checkbox" id='hello'> <label for="hello"> hello </label> <ul> <li>A</li> <li>B</li> <li>C</li> </ul> Alo ...

Best practices for removing css styles from a div element when selecting another within a Polymer application

Seeking assistance, can anyone help me? I have an iron-list with individual entries each containing a "settings" icon. When this icon is clicked, a panel slides in from the right. The issue I am facing is that I want the panel to close automatically when ...

Tips for sending a secondary parameter through ajax to a php script

My current approach involves using ajax to retrieve data from a database and populate a drop-down list. Below is the code snippet for my ajax function: function searchq6(){ var searchstate = $("input[name='region']").val(); var searchTxt ...

Fixed position does not adjust based on the screen resolution

If I were to create a web page, I would include a main menu that always remains on the screen, similar to this design: https://i.sstatic.net/I57Xk.png There are no issues with screen resolution exceeding 1300px, as seen in the image above. However, when ...

Incorrect legend colors in Highcharts pie chart

[![enter image description here][1]][1] There seems to be an issue with the Pie-Chart where the Slice color and the Legend color do not match when the color is set using className. This problem does not occur with some other charts. If you look at the co ...

A guide on how to use Bootstrap to align elements at the center of a div container

My attempt to center an image in the div didn't quite work out as planned. Here's the snippet of my html and css: .col-xs-4 { background-color: lightgrey; width: 300px; height: 200px; border: 6px solid green; padding: 25px; margin: ...

The button remains in a pressed state when viewed on a mobile device

This button is functioning properly in desktop view, but in mobile view the button remains pressed down. :root { --green: #4285f4; --black: rgba(9, 13, 25, 0.752); --box-shadow: .4rem .4rem 1rem #ccc, -.4rem -.4rem 1rem #fff; --box-shadow-inset: ...

"Troubleshooting web development issues with Bootstrap, jquery, and the frustrating

Lately, I've been encountering some errors related to missing files that didn't show up before. This issue is causing my cards to not resize properly, although they function correctly in the atom HTML preview. view errors image Below is a snippe ...

How can I set a minimum date in the angular-bootstrap-datetimepicker configuration?

I have been researching the documentation for https://github.com/dalelotts/angular-bootstrap-datetimepicker but I am struggling to locate a setting to define the minimum date. My objective is to restrict selection to future dates only. ...

Eliminate extra space beside the dark column on the right side in Bootstrap 4

For some time now, I've been struggling with an issue related to the left sidebar. When the sidebar is absent, the white space on the right disappears. I've tried various suggestions from others but none seem to solve the problem. I'm unsure ...

Altering HTML code using jQuery within an Angular app for a WYSIWYG editor

I am working with a wysiwyg editor that utilizes a $scope variable to generate HTML content. Currently, I am trying to dynamically add div elements at specific locations within the HTML string. This will allow me to programmatically modify different parts ...

Different ways to modify the underline and label color in Material-UI's <Select/> component

A while ago, I came across this useful demo that helped me change the colors of input fields. Here is the link: https://stackblitz.com/edit/material-ui-custom-outline-color Now, I'm on a quest to find a similar demo for customizing the color of selec ...

Ruby is encountering compatibility issues with Bootstrap

I've exhausted all my options trying to get my Bootstrap navbar to work in my Ruby on Rails application. I've made sure to have the latest versions of both Ruby and Rails. I've followed the instructions on GitHub to include the necessary ge ...

Can we enclose a div within a bootstrap row, but not as a grid item

Can a div be wrapped inside a row without using column classes? While it is technically possible, some may argue that it is not the best practice. Let's explore this further. Take a look at the example below: <div class="row"> <div class=" ...

Issues have been reported with Angular 10's router and anchorScrolling feature when used within a div that is positioned absolutely and has overflow set

I feel like I may be doing something incorrectly, but I can't quite pinpoint the issue. Any help or pointers would be greatly appreciated. My current setup involves Angular 10 and I have activated anchorScrolling in the app-routing.module file. const ...

Showcasing Items Within JSON Object in Angular

I am dealing with a JSON database that contains nested Objects: { "characters2": [ { "campaign":"Menagerie Coast", "index": 1, "name": "Mark Whithershmitz", "portrait": "assets/pics/markW.jpg", "affiliation": "Kryn Dynast ...

Unable to add data to an Array once subscribed to BehaviorSubject

Hello everyone, this is my first time asking a question here. I hope it's clear enough for you to understand :) Let's dive straight into the issue at hand. I have a query regarding a behaviorSubject variable in TypeScript that is not allowing me ...

Calculating the total sum of values using a dropdown list as a filter with J

I have successfully implemented a dropdown filter in my jQuery datatable to filter data. However, I am now looking to calculate the sum of all values in the filtered table each time a user selects a value from the dropdown list. How can I achieve this? My ...

What could be causing the issue with the padding-top not being applied to my section?

I'm having trouble getting the desired 150px padding to appear on the top and bottom of a section in my project. Here's an example: Below is the code for the section: .wp-block-mkl-section-block .section-bg { position: absolute; top: ...

Responsive Bootstrap tables nested within responsive tabs

Utilizing footable in conjunction with Boostrap Responsive Tabs leads to an issue post-resize. When the page is initially loaded on a desktop, everything functions properly until the screen is resized. Once the screen is resized, the tables within the tabs ...