Occupying the available space within nested columns | Bootstrap 4

I am currently building a website using Bootstrap 4 that includes two components (labeled as 2 and 3 in the diagram) that need to fill up all available space on the page. I have come across numerous similar questions online with different solutions. After researching, I chose the best solution and implemented it in my project. Here is what I attempted: https://www.codeply.com/p/sEHcVsMlML

Although the surrounding divs in the provided Codeply example fill up the remaining space, the nested divs which are supposed to fill the space do not. These nested divs have the same classes, so it is unclear to me why they are not behaving as expected.

The concept I am aiming for is illustrated below: https://i.sstatic.net/Lm0Kp.png

The goal is for sections 1, 2, and 3 to occupy the remaining height of the page.

htmlcsstwitter-bootstrapbootstrap-4flexbox

Answer №1

Having experience with Bootstrap since version 2, I have come to realize that Bootstrap is not all-powerful, and sometimes it's more efficient to incorporate additional CSS for certain solutions. Your task demonstrates how to achieve this using display: grid;

.my-grid {
  display: grid;
  grid-template-columns:  100px 1fr 1fr; /* 3 columns with each width */
  grid-template-rows: auto 1fr; /* first row - auto height, second row - all the rest height */
  grid-template-areas: 
    "left top2 top3"
    "left bottom2 bottom3";
  min-height: calc(100vh - 56px); /* 56px is the height of nav */
  /* for acting like .row in .container, optional */
  margin-right: -15px;
  margin-left: -15px;
}
.grid-left-1 {
  grid-area: left; /* refers to grid-template-areas of parent */
  background-color: #8ca0ff;
}
.grid-top-2 {
  grid-area: top2;
  background-color: #ffa08c;
}
.grid-bottom-2 {
  grid-area: bottom2;
  background-color: #ffff64;
}
.grid-top-3 {
  grid-area: top3;
  background-color: #8eff8c;
}
.grid-bottom-3 {
  grid-area: bottom3;
  background-color: #a764ff;
}

/* for screen < 510, the example of how you can treat grid on smaller screens*/
@media (max-width: 510px) {
  .my-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr; 
    grid-template-areas:
      "left left"
      "top2 top3"
      "bottom2 bottom3";
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container-fluid d-flex flex-column vh-100 overflow-hidden">
    <nav class="row navbar navbar-light bg-light navbar-expand px-0 flex-shrink-0">
        <a class="navbar-brand" href="#">App</a>
        <ul class="navbar-nav">
            <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
            <li class="nav-item"><a href="#" class="nav-link">More</a></li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item"><a href="#" class="nav-link">Options</a></li>
        </ul>
    </nav>
    
    <div class="my-grid">
      <div class="grid-left-1">1</div>
      <div class="grid-top-2">Some text</div>
      <div class="grid-bottom-2">2</div>
      <div class="grid-top-3">Some text</div>
      <div class="grid-bottom-3">3</div>      
    </div>
</div>

UPDATED

If you prefer utilizing Bootstrap classes, here is a solution incorporating Bootstrap flex. Learn more about Bootstrap flex utilities

.my-height {
  height: calc(100vh - 56px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container-fluid d-flex flex-column vh-100 overflow-hidden">
    <nav class="row navbar navbar-light bg-light navbar-expand px-0 flex-shrink-0">
        <a class="navbar-brand" href="#">I'm 56px height</a>
        <ul class="navbar-nav">
            <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
            <li class="nav-item"><a href="#" class="nav-link">More</a></li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item"><a href="#" class="nav-link">Options</a></li>
        </ul>
    </nav>
    
    <div class="row">
      <div class="col-4 my-height bg-primary  overflow-auto">
        1
      </div>
      <div class="col-4">
        <div class="d-flex flex-column my-height">
          <div class="bg-secondary">
            Some text
          </div>
          <div class="flex-fill bg-success overflow-auto">
            2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>
          </div>
        </div>
      </div>
      <div class="col-4">
        <div class="d-flex flex-column my-height">
          <div class="bg-secondary">
            Some text
          </div>
          <div class="flex-fill bg-success overflow-auto">
            3
          </div>
        </div>
      </div>
    </div>
</div>

Answer №2

Applying negative margin and padding to the top can create a unique design element

.orange{
    background: orange;
    margin-top: -40px;
    padding-top: 50px;
 
}

.pink{
    background: pink;
    margin-top: -40px;
    padding-top: 50px;

}
.title{
    z-index: 1;
    background: red; //I add red to test
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container-fluid d-flex flex-column vh-100 overflow-hidden">
    <nav class="navbar navbar-light bg-light navbar-expand px-0 flex-shrink-0">
        <a class="navbar-brand" href="#">App</a>
        <ul class="navbar-nav">
            <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
            <li class="nav-item"><a href="#" class="nav-link">More</a></li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item"><a href="#" class="nav-link">Options</a></li>
        </ul>
    </nav>
    <div class="row flex-grow-1 overflow-hidden">
        <div class="col-2 mh-100 overflow-auto py-2">
            <h6>Sidebar</h6>
            <ul class="nav flex-column bg-info rounded">
                <li class="nav-item">
                    <a class="nav-link text-white" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" href="#">Link</a>
                </li>
            </ul>
        </div>
        <div class='col mh-100 overflow-auto'>
            <div class='row flex-grow-1'>
                <div class='col mh-100 overflow-auto'>
                    <div class='row flex-shrink-0'>
                        <div class="col title">
                            <h3>Body content</h3>
                        </div>
                    </div>
                    <div class='row flex-grow-1'>
                        <div class="col pink mh-100 overflow-auto">
                            <h2>This div must fill remaining height</h2>
                            <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
                        </div>
                    </div>
                </div>
                <div class='col mh-100 overflow-auto'>
                    <div class='row flex-shrink-0'>
                        <div class="col title">
                            <h3>Body content</h3>
                        </div>
                    </div>
                    <div class='row flex-grow-1'>
                        <div class="col orange mh-100 overflow-auto">
                            <h2>This div must fill remaining height</h2>
                            <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

Having trouble setting the image source in HTML with Node.js

I am a beginner with nodeJS and I am having trouble setting the src attribute of an img tag in my client side html. My node server is running on port 3000 and everything works fine when I visit http://localhost:3000. Here is the code from my server.js fil ...

javascripthtmlnode.jssocket.io

Is it possible to embed a section of code from a different file?

Looking for a solution to streamline the process of updating multiple web pages with identical header and footer content. Currently have 5-10 pages with the same information, making it time-consuming to manually update each one when changes are needed. I ...

htmlcss

Button that toggles colors

I tried creating a JavaScript code that would change the background color of the body when a button is clicked. However, when I checked the console, it showed an error saying that body.style.background is not a function. Can someone help me identify the ...

javascripthtmlarrays

Delay occurs unexpectedly when adding a class with jQuery to multiple elements

I am in the process of creating a flipping counter that is designed to change colors once it reaches a certain target number (in this case, 1000). However, I am noticing that the different sections of the counter do not change color simultaneously, there s ...

javascriptjqueryhtmlcss

Can you tell me the best way to render a partial to a specific location in Ruby on Rails using the button_to method?

As a newcomer to Ruby on Rails, I am currently working on creating a basic messaging application. So far, I have successfully implemented user creation/login and have managed to render the inbox. However, I am facing difficulty in rendering a partial conta ...

htmlruby-on-railsrubymodel-view-controllerpartial

Guide on turning off CSS in Python Selenium with ChromeDriver utilizing ChromeOptions

In an effort to improve the loading speed of my page, I attempted to display it without CSS. I successfully disabled images and javascript using the code below: option = webdriver.ChromeOptions() prefs = {'profile.default_content_setting_values': ...

pythoncssgoogle-chromeselenium-webdriverselenium-chromedriver

I'm having trouble with my Angular application in the MEAN stack not being able to receive or read HTTP requests

error Initially, I developed an API that was capable of handling both GET and POST requests: more error const express = require('express'); const router = express.Router(); const model = require('../models/taskModel'); router.get(&ap ...

javascripthtmlangularweb

Aligning a bootstrap 4 navbar with a mega menu at the center

Trying to center the mega menu in Bootstrap4 led me to this: I attempted this approach initially: <nav class="navbar navbar-light bg-light navbar-expand-lg sticky-top" id="myNavbar"> <button class="navbar-toggler" ...

htmlcssbootstrap-4navbar

Troubleshooting: Issue with Deleting Table Rows using MySQL and PHP

I am having trouble deleting a table row from my database using MySQL and PHP. Despite reviewing my code, I cannot identify the issue. I believe that I am close to resolving the problem, likely something simple that I am overlooking. When hovering over th ...

phphtmlmysqlsql

Any ideas on how to add animation to this Raphael SVG Skillbar project?

I'm interested in using the Raphael Diagram Skillbar as shown in this link: HERE However, I would like to add animation to each line similar to what is shown here: (animation at start position) HERE Does anyone know how I can achieve that effect? ...

jquerycssanimationsvgraphael

What is preventing BODY from respecting min-height: 100% ?

Struggling to create a basic webpage with a container that extends to the bottom? Here's what I'm aiming for: #Main should be as tall as the viewport, but able to stretch further with additional content. body should match the viewport height, y ...

htmlcssheightdocument-body

Bootstrap modal popup is experiencing issues with Angular validation functionality

My form is opening in a Bootstrap modal popup, but the Angular validations are not working within the popup. https://i.sstatic.net/VCSuY.png Thank you in advance ...

bootstrap-4angular8

Refreshing my perspective with AngularJS

I am currently trying to modify the following code snippet: <p>You have <span ng-model="char-count">{{255 - (name.length + email.length + textarea.length)}}</span> characters left</p> It seems like wrapping 255 - name.length + ema ...

javascripthtmlangularjs

Growing animated backdrop

My website layout consists of a centralized wrapper div containing a header, three columns with dynamic heights based on content length, and a footer. I now want to enhance the design by adding background colors that expand in width to the left and right. ...

htmlcssdynamic

Stop automatic resizing on mobile device after postback

Encountered an issue with a website I'm currently developing. It's not causing any problems, but I want to enhance the user experience. My aim is to maintain the zoom levels of mobile devices after a postback. To provide more context, there is a ...

javascriptandroidhtmlasp.net

Ways to define a variable based on a CSS class attribute?

I need help figuring out how to create a variable in my script that is defined by the width attribute of a CSS class. The snippet I have currently doesn't seem to work as expected. var dist = $('.nav').css(width()); The goal of my script i ...

javascriptjquerycss

Steps to clear all HTML input fields after closing an angular modal

Inputting a username and password into the text field without saving, then closing the popup modal seems to be a common occurrence. If I happen to click outside of the modal, it conveniently closes on its own. However, when reopening the popup, the previ ...

javascripthtmlangularjs

How can I adjust the regular font size within a paragraph or link using bootstrap?

Looking at the fs-* classes can be very helpful, you can find them here: https://i.sstatic.net/l1Y22.png The issue I'm facing is that these classes only work for h1 to h6 headings, and not for smaller text. For example, I am unable to adjust the fo ...

htmlcsstwitter-bootstrapbootstrap-5

Tips for optimizing the page speed of your Pixi JS app by ensuring it runs efficiently after the page loads

On my website, I implemented a dynamic gradient animation with shape-changing blobs using pixi js. The animation functions flawlessly, but the issue arises when I run page speed tests - the test assumes that the page has not finished rendering because the ...

javascripthtmljquerycsspixi.js

Eliminate blank spaces in bootstrap

After searching through various questions, I have been unable to find a solution to my issue. My goal is to arrange images in sets of three on each row, but the extra whitespace is causing alignment problems. This is what it currently looks like: https: ...

bootstrap-4react-bootstrap