Using Bootstrap 4, you can create nested rows that will automatically expand to fill their parent container, which in turn has been set

In my current setup, I have a div with the class "d-flex flex-column" that contains a navbar and a container. Within this container, there is another div with the class "d-flex flex-column" which then contains two rows. I am using flex-grow to make the container fill the page, but I am having trouble making the second row within the nested container grow to fill its parent after setting the parent to fill the viewport height using flex-grow in Bootstrap v4.

I am wondering if combining flex and container is not the best approach for achieving what I want. If that's the case, could you provide guidance on how I should proceed?

When I attempt to set the height of the inner row to expand accordingly within the container that is already filling the height, it just stays the same height and does not adjust as intended.

<div class="d-md-flex flex-column h-100">
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <button class="btn btn-outline-warning mr-auto" type="submit">Back</button>
      <button class="btn btn-outline-success" type="submit">Logout</button>
    </nav>

    <div class="container-fluid flex-grow">

      <div class="row">
        <div class="col-md-9">
          <div class="row">

            <div class="col-md-12">
              <div class="btn-toolbar justify-content-between" id="label-toolbar">
                <div class="btn-group">
                  <select class="form-control form-control-sm" id="label-option">
                    <option>Main</option>
                    <option>Unknown</option>
                  </select>
                  <button type="button" class="btn btn-outline-primary btn-sm" id="create-button">Create</button>
                  <button type="button" class="btn btn-outline-primary btn-sm" id="delete-button">Delete</button>
                  <button type="button" class="btn btn-outline-primary btn-sm" id="edit-button">Edit</button>
                </div>
                <div class="btn-group">
                  <button type="button" class="btn btn-outline-success btn-sm" id="previous-button">Previous</button>
                  <button type="button" class="btn btn-outline-success btn-sm" id="next-button">Next</button>
                </div>
              </div>

              <div id="draw-area"></div>

            </div>
          </div>
        </div>

        <div class="col-md-3 label-sidebar"></div>
      </div>

    </div>

  </div>

Update: I encountered an error when implementing @ZimSystem code. What steps should I take to resolve this issue?

https://i.stack.imgur.com/ZaRFq.png

htmlcssflexboxbootstrap-4

Answer №1

The key thing to remember is that flex-grow is applied to the child of a display:flex element, not the parent. So, if the parent is also a child, flex-grow will work as expected.

.flex-fill {
    flex: 1 1 auto;
}

In your situation, you should make sure that your 

<div class="container-fluid flex-fill"></div>
is also set to d-flex, allowing you to use flex-grow for its children to grow in height and continue this down to the drawing area.

Visit this link for an example

<div class="d-md-flex flex-column h-100">
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <button class="btn btn-outline-warning mr-auto" type="submit">Back</button>
        <button class="btn btn-outline-success" type="submit">Logout</button>
    </nav>
    <div class="container-fluid d-flex h-100">
        <div class="row flex-grow">
            <div class="col-md-9">
                <div class="row h-100">

                    <div class="col-md-12 d-flex flex-column flex-grow">
                        <div class="btn-toolbar justify-content-between" id="label-toolbar">
                            <div class="btn-group">
                                <select class="form-control form-control-sm" id="label-option">
                                    <option>Main</option>
                                    <option>Unknown</option>
                                </select>
                                <button type="button" class="btn btn-outline-primary btn-sm" id="create-button">Create</button>
                                <button type="button" class="btn btn-outline-primary btn-sm" id="delete-button">Delete</button>
                                <button type="button" class="btn btn-outline-primary btn-sm" id="edit-button">Edit</button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-outline-success btn-sm" id="previous-button">Previous</button>
                                <button type="button" class="btn btn-outline-success btn-sm" id="next-button">Next</button>
                            </div>
                        </div>

                        <div id="draw-area" class="flex-grow bg-warning"> draw area </div>

                    </div>
                </div>
            </div>
            <div class="col-md-3 label-sidebar"></div>
        </div>
    </div>
</div>

Note: The flex-fill utility class will be added in the next Bootstrap 4.1 release: Learn more here

For another example with a scrollable right column and top navbar, take a look at: Click here

Related:
Creating a responsive header using Bootstrap 4.0
How to stretch a row to fill remaining height in Bootstrap 4

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

Semantic HTML and unambiguous: both

We are making an effort to enhance the semantics of our HTML, and one element that stands out in our code related to presentation is <div class="clear"></div> For instance, if we consider the following semantic HTML structure: <div class= ...

htmlcsssemanticssemantic-markup

Confirm the data within an HTML table and apply color coding to the cells appropriately

Currently, I have an HTML table used to automatically validate data collected from soil pollutants analyses. Here is a snippet describing the table structure: <table id="table1"> <thead class="fixedHeader"> <tr><input type="submit" ...

javascriptjqueryhtml

Finding and removing a specific CSS pattern from a webpage that has been loaded

Encountered a troublesome Amazon.com page that appears blank in print preview, specifically the Online Return Center\Your Return Summary page. After much troubleshooting on a locally saved copy of the webpage, I pinpointed the issue to a problematic l ...

cssdeveloper-tools

Looking for search suggestion functionalities in an HTML input field

I am currently working on a website project and have a database filled with recipes to support it. The issue I am facing is related to the search feature on my webpage. At the top of the page, there is a textarea where users can input their search queries ...

javascripthtmljsonsearch

Angular - Dividing Functionality into Multiple Modules

I am currently working with two separate modules that have completely different designs. To integrate these modules, I decided to create a new module called "accounts". However, when I include the line import { AppComponent as Account_AppComponent} from &a ...

javascripthtmlangulartypescriptangular8

Integrate, Delay, Experimentalize, and Attach components

This inquiry might lean more towards a general browser/javascript discussion rather than a focused prototype question, but I believe this community possesses a deep understanding of javascript and browsers. With that said, here is my query: If the followi ...

javascripthtmldynamicprototypejs

Is there a method to retrieve the subdirectories and files currently present on a given URL?

Picture having a file on your system with the following URL: I am curious if there is any software, command, or script that can retrieve subfolders/files based on a given URL. For instance: Input parameter: http://my.page/folder_1/ Output: http://my.p ...

javascripthtmlbashwebnetworking

Unable to view mobile version on HTML page / lack of responsiveness observed

<body> <nav class="navbar navbar transparent"> <div class="container-fluid logo"> <div class="navbar-header"> <a class="navbar-brand" href="#"> <img src="images/Logo.png" /> & ...

htmlformstwitter-bootstrapmobileresponsive-design

Implementing a smooth transition for a never-ending CSS rotation animation upon clicking a different div with the help of jQuery

I am attempting to utilize jquery in order to bring a constantly rotating div (with CSS animation) to a gradual, smooth halt when another div is clicked. My current strategy involves changing the "animation-timing-function" property from "linear" to "ease ...

javascriptjquerycssanimationrotation

Steer clear of posting additional content that might bump the existing content further up

How can I keep the search bar centered on the screen, even when content is added below it? Here's a screenshot illustrating the issue: https://i.stack.imgur.com/7pQ1q.png The text in the image is causing the search bar to move up, but I want the sea ...

htmlcss

Navigational strip within the grid

My grid has a size of 300px. When there are more than 10 records, a vertical scroll bar appears, which is fine. However, at the same time, a horizontal scroll bar also appears, which I do not want to display. My CSS class for vertical scrolling is: .vstyl ...

cssag-grid

"Using jQuery to trigger a click event on a specific column within

Welcome to my HTML table. <table id="status_table" class="table table-bordered"> <tr> <th>Serial Number</th> <th>Product Number</th> <th>Description< ...

jqueryhtmlajax

Discover the job specifications pages on Dice.Com by utilizing C programming language

I have taken on a student project involving web scraping job postings from Dice.Com for analysis. My main focus is on extracting the job description, but I am struggling to figure out how to access it. With limited knowledge in HTML and C#, I find it dif ...

c#htmlseleniumweb-scrapinghtml-agility-pack

Tips for creating a concise summary of written content

I am interested in creating an AI-powered summary generator for text input within a textarea element. Below is the HTML code snippet I have been working with: <textarea id="summary">Enter your text here</textarea> If you hav ...

javascripthtmltextartificial-intelligence

Enhance the appearance of rows in a table by adding a captivating marquee effect to those with

I'm working with a table that has 7 rows and 2 tabs for Sunday and Monday. The row corresponding to the current time is highlighted in red. I wanted to know if it's possible to add the following <marquee>My first Row</marquee> effe ...

javascriptjqueryhtml

Guide on generating a child element in a React application using server response

I have developed a react application with multiple nested routes. One of the nested routes utilizes a backend API that returns complete HTML content. My goal is to display this HTML content with the same styling in my UI without directly manipulating the ...

htmlreactjsreact-dom

External JavaScript file not executing defined function

My homepage includes a register form that should open when the register button is clicked. However, I am encountering an issue where the function responsible for opening the form from another JavaScript file is not being triggered. Here is the HTML code: ...

javascriptjqueryhtml

Creating a designed pattern for a textbox: Let's get creative with your text

How can I create a Textbox that only allows numeric values or the letter 'A'? <input type="text" id="txt" name="txt" pattern="^[0-9][A]*$" title="Allow numeric value or only Letter 'A'&quo ...

htmldesign-patterns

JavaScript allows for the manipulation of elements within a webpage, which includes accessing elements from one

There is a file that contains a fragment for the navbar. The idea is to have listItems in the navbar, and upon clicking on those listItems, another subnavigationbar should open below it. Below is the code I currently have: <!DOCTYPE html> <html x ...

javascripthtmlcssbootstrap-5

What is the best way to assign names to images in a Rails application?

When working in html, you can use the code <img class="myimage" src="image.jpg"> to make editing in .css simpler. But what is the equivalent of this when dealing with a .html.erb file? For example, where should I define the class in this <%= imag ...

htmlcssruby-on-railsruby