Creating a Full Height Layout with Two Columns Using Bootstrap 4

Looking for a solution similar to the one discussed in this thread.

I'm struggling to figure out how to achieve the layout shown below using Bootstrap 4. The key requirement is that col 1, col 2, and col 3 must stretch to the bottom of their respective rows. While attempting to nest columns in Bootstrap 4, I noticed that it doesn't automatically adjust the parent row's height. Any assistance would be greatly appreciated. You can also view an example on CodePen here. My goal is to have the red color in the CodePen container cover the yellow color. Thank you in advance.

  +-------------------------------------------------+
  |                     Header                      |
  +------------+------------------------------------+
  |                        | COL 1 | COL 1 | COL 3  |
  |       Navigation       |       |       |        |
  |                        |       |       |        |
  |                                                |
  |                                                |
  |                                                |
  |                                                |
  |                                                |
  |                                                |
  |                                                |
  |                                                |
  |                                                |
  +------------+------------------------------------+
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you're looking to achieve a full height layout, simply include the h-100 class (height:100%) in the row element.

Below is an example of how to implement this:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
    .container {
        background: green;
    }

    .col-md-3 {   
        background: pink;
    }
    .col-md-9 {
        background: yellow;  
    }
    .col-md-4 {
        background: red;
    }
</style>

<div class="container">
   header
    <div class="row">
        <div class="col-md-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has </div>
        <div class="col-md-9">
            <div class="row h-100">
                <div class="col-md-4">col2 - 1</div>
                <div class="col-md-4">col2 - 2</div>
                <div class="col-md-4">col2 - 3</div>
            </div>
            col2
        </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

Change the width of specific <li> elements to create variation

My goal is to configure a ul element with varying widths using flex. Specifically, I want the first two items in the ul to be 60% width while the last two items should be 40%. However, my flex-basis property doesn't seem to be working as expected. ...

htmlcssflexbox

Choosing the initial choice with ngFor: A step-by-step guide

I'm having trouble selecting the first option after the user enters their email, but it remains unselected. Any ideas on how to solve this? view image here HTML Code: <label for="login"><b>User:</b></label> <inpu ...

typescriptbootstrap-4html-selectangular9

SVG failing to display properly

I need to place a close button in the top right corner of my page. Here is the code for the SVG: .icon { width: 24px; height: 24px; /* any changes to the fill attribute have no effect */ fill: currentColor; } <svg class="icon"> &l ...

htmlcsssvg

Adding space between the heading and the text underneath by placing a margin between h2

I am dealing with a situation where I have an <h2 class="landing-panel-title> containing a <span class="landing-panel-icon-right ion-ios-search-strong>. The second class on the span is from an icon font called ionicons. Despite this, it may not ...

htmlcss

Securing form submissions in Express JS: Best practices for protecting your data

In order to enhance security, the loginform.html located in the public folder sends the username and password input by the user to a server route '/login' for authentication. Server-Side Code: var express = require('express'); var app ...

htmlnode.jshttphttpsexpress

The issue of encoding SQL characters not functioning properly

While working with phpMyAdmin, I encountered a situation where my database contained special characters like 'é'. However, when I attempted to display them on my website, a black cube with a white '?' appeared. I experimented with the ...

htmlcharactermeta

If the header 1 contains a specific word in jQuery, then carry out an action

I have successfully used the contains() function before, but I've never incorporated it into an if-statement. The code below doesn't seem to be working as expected. Essentially, I want to check if H1 contains the word "true" and perform a certain ...

jqueryhtmlif-statement

Ensure that the dimensions of a div remain consistent across all screen resolutions, specifically for desktops and not mobile devices

Currently I am in the process of creating a highly secure and encrypted social network, but I have hit a stumbling block. I hadn't considered how my website would display on other desktops and laptops (not mobile devices). The issue is that I set all ...

htmlcss

JQuery Load fails to load in real-time

I have a PHP file where I am using JQuery to load the content of another file called 'live.php' which should display the current time, but for some reason it is not loading live. Can anyone help me troubleshoot this issue? It used to work perfect ...

phphtmljquerytimetrending

What is the best way to create a border of white space around the background color of a table cell using CSS?

Is there a way to create a white space around the background color of a table cell using CSS? My current code has the background color extend all the way to the edge, and padding only affects the content, not the background color. #main-monitor { widt ...

htmlcsspadding

Tips for implementing a shared CSS file in a multi-tenant platform

Currently, I am in the process of developing a multi-tenant application using Laravel and Livewire. Within this project, I have incorporated a Bootstrap template that is mounted similarly to a Laravel project. The integration of this template into my proje ...

laravelbootstrap-4laravel-livewire

Read through the text, determine the length of each word, and keep track of how

Objective: Create a JavaScript program that takes input from users in the form of several lines of text and generates a table displaying the count of one-letter words, two-letter words, three-letter words, etc. present in the text. Below is an example ou ...

javascripthtml

Tips for accessing the value of a DOM node during the first render

I am attempting to extract a value from an input textbox during the initial rendering process using useRef, but I am encountering the following error: " ref is not a prop. Trying to access it will result in undefined being returned. If you need to ac ...

javascripthtmlreactjsreact-hooks

Ensure that the form is validated using ngDialog openConfirm before it can be closed

I am facing an issue with a button that triggers the opening of an ngDialog.openConfirm. In this dialog, there is a form containing a textarea that must have a minimum of 20 characters. Below is a simplified version of the code: someFunction() { let ...

javascripthtmlangularjsng-dialog

The animation of the splash screen in Angular is quite jarring and lacks fluidity

I am experiencing some issues with my angular splash screen animation. It works perfectly when there is no activity in the background, but when I simulate a real-life application scenario, the animation becomes stuttered, choppy, or sometimes does not anim ...

htmlcssangular

attempting to access a variable which was initialized within a function in different sections of the code base

My goal is to retrieve a variable created within a function that is nested in a resize event parameter in jQuery. This variable should be dynamically updated each time the user resizes the browser window. I intend to utilize this variable to set the width ...

javascriptjqueryhtmlcss

Encountering [Object Object] within an angular2 app

https://i.stack.imgur.com/iceKH.pngI recently created an angular2 application using ngrx/effects for handling http calls. My reference point was an application on GitHub. However, I am facing an issue where the response from the HTTP call is not displaying ...

htmlangularrestngrx-effects

Customizing the Mui Theme in a Unique Way

After generating an MUI component from Mui DatePicker, I encountered the following code: <span class="my-theme-MuiTypography-root my-theme-MuiTypography-caption my-theme-MuiDayCalendar-weekdayLabel css-1mln09i-MuiTypography-root-MuiDayCalendar-week ...

javascripthtmlcssreactjsmaterial-ui

Ensure the background image completely fills the div, regardless of the image's aspect ratio

Can anyone help me figure out how to fill a div's background with an image, regardless of its aspect ratio (landscape or portrait)? I've tried different methods from using background-size: cover; to background-size: 100% 100%;, but the div doesn& ...

htmlcss

Hover over an element repeatedly to trigger an action with jQuery, as opposed to just once

Is it possible to have my p tag transition whenever I hover over it? I am looking to create a hover effect on an image that displays text in a div tag with scaling transitions. Can someone assist me with this? Instead of using jQuery or JavaScript to dyn ...

jqueryhtmlcsstwitter-bootstrap