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

Numerous elements positioned absolutely are overlapping

I am working on a website with a unique slide layout design. I am currently focusing on two specific slides: https://i.stack.imgur.com/xngF4.png and https://i.stack.imgur.com/W19tJ.png My goal is to include a button on each individual slide, similar to th ...

htmlcsscss-position

Accordion Tuning - The Pro and Cons

Here is a functional accordion that I've implemented, you can view it here This is the JavaScript code I am using: $(document).ready(function ($) { $('#accordion').find('.accordion-toggle').click(function () { //Expa ...

javascriptjqueryhtmlaccordionjquery-ui-accordion

Why does the IMG keep loading every time the web page is refreshed?

I am experiencing an issue with my html page where the background images are not reloading when I refresh the page, but the logo image is. The background images are called through an external CSS file, while the logo is used with an <image> tag. Wh ...

htmlcss

Is it possible to create a stylish box for an HTML form?

I'm trying to figure out how to put a form inside a box or have a border around it, but I'm stuck. I want the background to be white and was considering using a transparent option. Are there any experts out there with some simple ideas on how to ...

htmlformstextboxborder

Incorporating fresh JSON information into an established database

I'm currently facing an issue with adding new data (from JSON) to an existing table using jQuery. Within my HTML, there's a sample table structure like this: <table data-role="table" data-mode="columntoggle" class="ui-responsive" data-column ...

javascriptjqueryhtmljsonhtml-table

What is the benefit of utilizing pseudo elements to divide block elements?

I'm seeking clarification on a w3school example that showcases responsive grid design. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { box-sizing: bo ...

htmlcss

Using jQuery, we can replace all `<span>` elements with `<img>` elements and then verify if the images have been successfully loaded

Similar Inquiry: jQuery check if image is loaded I find myself in a scenario where the following HTML structure is utilized: <div class="image"> <img class="" src="content-images/1.jpg"> <span class="slide" rel="content-images/ ...

javascriptjquerycssimage

Is there a way to conceal the second td element?

This is the code I'm using: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> </head> <body style="width:100%;" > ...

htmlcss

Utilize Angular2's input type number without the option for decimal values

Is there a way to prevent decimals from being entered in number inputs for Angular 2? Instead of using patterns or constraints that only invalidate the field but still allow typing, what is the proper approach? Would manually checking keystrokes with the ...

javascripthtmlinputangular

Bordering the isotopes

Currently, I am utilizing a plugin that involves the isotope filter library. By setting the width to 33.33%, my list elements are organized into 3 columns. I am trying to specify the middle column to have side borders. However, whenever I click on the filt ...

htmlcssjquery-isotope

Enhance the user experience with a personalized video player interface

I am facing difficulty in creating a responsive video with custom controls. While I understand that using a <figure></figure> element and setting the width to 100% makes the video responsive, I am struggling with making the progress bar also r ...

javascriptcsshtmlvideo

The div element's width does not match the width of the textbox

I attempted to implement the following code in HTML. However, I am puzzled as to why the text box and div width are not the same size. Here is what I have experimented with. <style> .test { border:1px solid red;width:100px;height:30px;padding:3p ...

htmlcss

Put the title tag within a script in the shell

Within an HTML snippet, I currently have a <title> tag that I need to change on a monthly basis when generating reports. While I can manually update it each month, I am looking for a way to automate this process so the title reflects the relevant rep ...

htmlshelltagstitle

Unresponsive Radio Buttons in HTML

Have you ever encountered the issue where you can't seem to select radio buttons despite them having a confirmed name attribute? Here is an example of the HTML code: <div id="surveys-list" class="inline col-xs-12"><div> <div class="i ...

javascriptjqueryhtmlcssradio-button

Animating a CSS shape with the .animate method

I need help creating a dynamic graphic for my school project using css, jquery, and html. I want to make a rectangle that moves across the screen, but I'm having trouble getting it to work properly. Despite trying different variations of the animate f ...

javascriptjqueryhtmlcss

SyntaxError: The input on line one ended unexpectedly and was not caught

This issue is commonly associated with messy close parentheses, however, the error is occurring on line 1 of the file! Below is the javascript code from (filename: calculate.js) var colors = new Array(); colors["SILVER"] = -2; ... Although there is m ...

javascripthtmlsyntaxsyntax-error

How come ng-class doesn't apply to a specific class name?

I recently wrote the following code: <style> .dotted { border:dotted; } </style> .... <p ng-style="mystyle" ng-class="dotted">{{ answer }}</p> My intention was to have the paragraph element enclosed within a ...

javascriptcssangularjsng-classangularjs-ng-class

Dynamic Website (Link Relationships / Responsive Design / Content Rendering with CSS and HTML)

Hello everyone! My name is Mauro Cordeiro, and I come from Brazil. I am just diving into the world of coding and have been following various tutorials. Stack Overflow has been an invaluable resource for me in my learning journey! Aside from coding, I am a ...

javascriptjqueryhtmlcss

Is there a way to adjust the placement of text in an HTML document?

Just starting out with web development and created some HTML code: <html> <body> {errors} <p>Input your numbers:</p> <form method="post" action="."> <p><inpu ...

htmlcsscss-positionwebfonts

Strange occurrence with z-index, list items that are floating are not being displayed on top of the heading

I have come across a unique problem with z-indexes that I have never experienced before. To address one common speculation right away: the positioning for each element with a z-index is already set properly, so that's not the issue. Despite my efforts ...

htmlcsspositioningz-index