Utilizing Bootstrap 4 to ensure the final DIV is vertically stacked and fills the remaining space in the container

Having trouble creating a responsive layout using Bootstrap 4? Specifically, when two divs wrap vertically on smaller devices, the top div pushes the lower div down, exceeding the parent container. I want the lower div to fit within the container. How can I achieve this using Bootstrap 4 or minimal CSS?

To illustrate the issue, I've added a yellow border on the bottom of the second div.

View on Large Device

View on Small Device

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

.bottom-border {
    border-bottom: 50px solid yellow;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<body>
    <div class="container-fluid p-0 h-100">
        <div class="row h-100">
            <div class="col-md-8 bg-primary h-md-100 ">
                <div class="d-md-none text-center bg-primary">
                    <h5>Left Section</h5>
                </div>
                <div class="d-none d-md-block m-3">
                    <h1>Left Section</h1>
                </div>
            </div>
            <div class="col-md-4 h-100 text-center bg-danger bottom-border">
                <h4>Right Section</h4>
            </div>
        </div>
    </div>
</body>

htmlcssbootstrap-4

Answer №1

Now that you've shed light on the importance of border height, I understand your point. The culprit here seems to be the h-100 classes that you have applied.

This particular class instructs the element to take up 100% of its parent's height. Since you've added this class to both the main container and the row elements, they are occupying the full height of the screen as the container's parent is the browser window and the row's parent is the container itself.

However, when you use this class on the child div, in this case, the red div, it also tries to make use of the entire height of its parent (the row), without considering the other item inside (the blue div). If you remove the h-100 class from the red div, then each of them will occupy half of the available space.

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}

.bottom-border {
  border-bottom: 50px solid yellow;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="container-fluid h-100">
    <div class="row h-100 flex-column flex-md-row">
      <div class="col-md-8 bg-primary">
        <div class="d-md-none text-center bg-primary">
          <h5>Left Section</h5>
        </div>
        <div class="d-none d-md-block m-3">
          <h1>Left Section</h1>
        </div>
      </div>
      <div class="col-md-4 flex-grow-1 text-center bg-danger bottom-border">
        <h4>Right Section</h4>
      </div>
    </div>
  </div>
</body>

Answer №2

It seems like you want to ensure that the left and right divs do not overlap each other?

When using col-md, it applies to window sizes above 768px, while col-sm is for sizes above 576px. If you just specify col-number, it will remain responsive regardless of container width.

html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
            overflow-x: hidden;
            overflow-y: hidden;
        }

        .bottom-border {
            background-color: yellow;
        }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<body>

<div class="container-fluid p-0 ">

        <div class="d-flex flex-row flex-wrap bd-highlight text-center ">
            <div class="col-md-8  ">
                <div class="  h-100 bg-primary">left</div>
            </div>
            <div class="flex-column col-md-4">
                <div class="  bg-danger ">Right</div>
                <div class=" bottom-border ">Bottom</div>
            </div>
        </div>
    </div>
    </body>

Additionally, if you are working with Bootstrap 4, I suggest exploring Flex, which simplifies responsiveness by applying the d-flex class to the parent element. It offers more control over layout compared to traditional column classes and is easy to implement once you understand its concepts.

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

Sending information from a dynamic table to a database using PHP

I've created an HTML webpage with a table that fetches data from my database. Each row in the table has a button that, when clicked, dynamically adds the data into another table on the webpage using JavaScript. The dynamic table includes a submit butt ...

javascriptphphtmlmysql

Transferring canvas element via socket with JS stack size limit

I'm encountering an issue where I need to transfer a canvas element over sockets using socket.io and Node.js. The code snippet below illustrates my approach: var myCanvas = document.getElementById("myCanvas"); var ctx = myCanvas.getContext("2d"); // ...

javascripthtmlsocket.iohtml5-canvas

What is the best way to align my logo image and search field at the center of the page, similar to the layout of

Struggling with styling this webpage. I aim to have my logo and search bar centered on the page, surrounded by ample space above and below. You can check it out at NE1UP dot com. All I want is a Google-style layout for my page, but I'm facing difficu ...

htmlcsstwitter-bootstrap

Issue with page not updating after local storage change and returning to previous page

I have encountered an issue where in Firefox and Safari, the value retrieved from localstorage on the first page is not updated until I manually refresh the page after setting the localstorage value on the second page. Disabling the cache did not resolve t ...

javascripthtmllocal-storage

Set Divs in Absolute Position Relative to Each Other

I need to create a simple navigation system using <div> elements as individual pages. The goal is to have "next" and "back" buttons that allow users to switch between these pages with a smooth fade-in and fade-out effect, all powered by jQuery. Howev ...

javascriptjquerycsspositioningslideshow

Activate a pointer cursor when hovering over a TextField in Material-ui design

Hey there! I'm new to Material-ui/ReactJS and I have a question. I'm trying to change the cursor to a pointer when hovering over a Material-ui TextField, but it's proving to be quite challenging. The default behavior is 'cursor: text&ap ...

cssreactjsmaterial-ui

I'm curious if there is a method to validate HTML elements within AngularJS. You can check out my app on Plunker [here](https://jsfiddle.net/4jttdczt/)

I'm a newcomer to angularjs and I am attempting to test HTML elements, but my tests are failing. Specifically, I would like to test the value or text contained within an HTML element. Can anyone provide guidance on how I can achieve this? Below is my ...

htmlangularjsunit-testingjasminekarma-runner

The code is triggering IE 8 to switch to compatibility mode resembling IE7

I have created a custom javascript function that generates a pop-up, and I am invoking this function in my code. However, every time I click the button, the browser switches to IE 7 compatibility mode and the pop-up appears behind the button. Below is my ...

javascriptjqueryhtmlinternet-explorer

Encountering a TypeError while attempting to utilize Django and Pandas for displaying data in an HTML format

import pandas as pd from django.shortcuts import render # Define the home view function def home(): # Read data from a CSV file and select only the 'name' column data = pd.read_csv("pandadjangoproject/nmdata.csv", nrows=11) only_city ...

pythonhtmldjangopandas

Tips on how to efficiently wrap content within a column layout, and to seamlessly shrink it if necessary

I recently encountered an issue where I am attempting to create a three-column layout with each column filled with a dynamic number of divs (boxes) ranging from 5 to 15, each with its own height based on its content. These divs are expected to: 1) Be dis ...

javascriptcssangularjsresponsive-designangular-material

Which tools are best suited for Xamarin development?

Recently, I've been contemplating how to style my app. One common approach is using CSS, but the question that lingers in my mind is whether it's truly compatible and if I should begin utilizing CSS. Is there perhaps a different language that wou ...

androidcssiosxamarinstyling

Update the text in a personalized dropdown menu when an option is chosen

After spending some time working on a customized dropdown with the use of CSS and Vanilla JavaScript (Plain JS), I encountered an issue while trying to select and update the dropdown text upon clicking an option: window.onload = () => { let [...opt ...

javascripthtmlcssecmascript-6dropdown

Using Google-Prettify with AngularJS

I have been attempting to implement Google Prettify in my AngularJS project. It seems to be functioning correctly on the main page, but once I navigate to another route using Angular (after ng-view), it stops working properly. You can check out the plunker ...

javascriptcssangularjsngroute

Exploring the distinctions among different material design frameworks

Confirming my grasp of the situation here. Material design is an interface building approach developed by Google. Material lite is Google's public implementation of this concept. serves as an independent open-source adaptation. In addition, Angul ...

cssangularmaterial-design

Horizontal rule spans the full width of the content, appearing within an ordered list

Check out this example to see the issue with the horizontal rule not extending all the way across under the number. I've tried using list-style-position:inside;, but that interferes with positioning the number correctly due to the left image being flo ...

htmlcss

Adding an existing element to the DOM using Javascript/jQuery

I am facing an issue in my DOM where I have an element with two children, a div block and a button. My goal is to add a new copy of the same div block to the parentNode whenever the button is clicked. Currently, I am using the following code in the button ...

javascriptjqueryhtmldom

Struggling to close modal popup after submitting form

click here for imageCurrently, I am working with the bootstrap modal plugin to create an inquiry form. The issue I am facing is that even though I am using the "ng-submit" directive to save the form details, when I click submit, the form submits successful ...

javahtmlangularjs

Javascript - When I preview my file, it automatically deletes the input file

My form initially looked like this : <form action="assets/php/test.php" method="post" enctype="multipart/form-data"> <input type="hidden" name="MAX_FILE_SIZE" value="1000000" /> ...

javascripthtml

I want to initiate a Python script by clicking a button on my HTML page with the help of Ajax

Here is my JavaScript code: function executePython() { alert("executed"); $.ajax({ url: "http://localhost:5000/app.py", type: "POST", ...

javascriptpythonhtmlajax

Tips for making a horizontal grid layout with three items in each row

I have a scenario where I need to render a group of Player components using map() loop, and I want them to be displayed horizontally side by side using a Grid component from material-ui. Currently, the components are rendering in a vertical layout: https ...

javascriptcssreactjsgridmaterial-ui