Prevent bootstrap columns in a single row from adjusting their heights uniformly

After spending a good amount of time reading through various questions and attempting to solve my issue, I am finally seeking help from all of you.

This is what I currently have:

The code in action

I am aiming for the following outcome:

Desired result

The current grid consists of 3 rows, with the second/middle row containing 3 columns. The first and third columns each have 2 rows. My objective is to ensure that the left and right columns do not adjust their height based on the middle column.

body {
    padding-top: 15px;
}

[class*="col-"] {
    background-color: rgb(250, 127, 127);
    border: 2px solid black;
    border-radius: 10px;
    text-align: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<style type="text/css">
  .col-lg-8 { line-height: 200px; }
  .col-lg-12 { line-height: 80px; }
</style>

<div class="container">
    <header class="row">
        <div class="col-lg-12">
            Header
        </div>
    </header>
    <div class="row">
        <div class="col-lg-2">
            <div class="row">
                <aside class="col-lg-12">
                    Side Panel
                </aside>
                <aside class="col-lg-12">
                    Side Panel
                </aside>
            </div>
        </div>
        <section class="col-lg-8">
            Main Content
        </section>
        <div class="col-lg-2">
            <div class="row">
                <aside class="col-lg-12">
                    Side Panel
                </aside>
                <aside class="col-lg-12">
                    Side Panel
                </aside>
            </div>
        </div>
    </div>
    <footer class="row">
        <div class="col-lg-12">
            Footer
        </div>
    </footer>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

htmlcssbootstrap-4

Answer №1

To make the col-lg-2 only take up full height and leave extra space blank, simply add h-100.

body {
    padding-top: 15px;
}

[class*="col-"] {
    background-color: rgb(250, 127, 127);
    border: 2px solid black;
    border-radius: 10px;
    text-align: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<style type="text/css">
  .col-lg-8 { line-height: 200px; }
  .col-lg-12 { line-height: 80px; }
</style>

<div class="container">
    <header class="row">
        <div class="col-lg-12">
            Header
        </div>
    </header>
    <div class="row">
        <div class="col-lg-2 h-100">
            <div class="row">
                <aside class="col-lg-12">
                    Sidebar
                </aside>
                <aside class="col-lg-12">
                    Sidebar
                </aside>
            </div>
        </div>
        <section class="col-lg-8">
            Main Section
        </section>
        <div class="col-lg-2 h-100">
            <div class="row">
                <aside class="col-lg-12">
                    Sidebar
                </aside>
                <aside class="col-lg-12">
                    Sidebar
                </aside>
            </div>
        </div>
    </div>
    <footer class="row">
        <div class="col-lg-12">
            Footer
        </div>
    </footer>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c2c332c2c392e72362f1c6d726d6a726c">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Answer №2

If you want to set a fixed height value for your row, you can achieve it by:

body {
    padding-top: 15px;
}

[class*="col-"] {
    background-color: rgb(250, 127, 127);
    border: 2px solid black;
    border-radius: 10px;
    text-align: center;
}

.fix-height {
  height: 400px;
}

.fix-height .col-lg-2,
.fix-height .row{
  height: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<style type="text/css">
  .col-lg-8 { line-height: 200px; }
  .col-lg-12 { line-height: 80px; }
</style>

<div class="container">
    <header class="row">
        <div class="col-lg-12">
            Header
        </div>
    </header>
    <div class="row fix-height">
        <div class="col-lg-2">
            <div class="row">
                <aside class="col-lg-12">
                    Aside
                </aside>
                <aside class="col-lg-12">
                    Aside
                </aside>
            </div>
        </div>
        <section class="col-lg-8">
            Section
        </section>
        <div class="col-lg-2">
            <div class="row">
                <aside class="col-lg-12">
                    Aside
                </aside>
                <aside class="col-lg-12">
                    Aside
                </aside>
            </div>
        </div>
    </div>
    <footer class="row">
        <div class="col-lg-12">
            Footer
        </div>
    </footer>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="68180718180d1a46021b285946595e4658">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Answer №3

Presented here is a straightforward solution

.col-lg-2 {
    height: fit-content;
}

Alternatively,

opt for 

<div class="col-lg-2 h-100">
instead of <div class="col-lg-2">

The .col-lg-2 had been adjusting its height based on the parent element, which in this case was the row above it.

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

Using CSS3 animation when adding a class, rather than on page load

I am trying to trigger my keyframe animations when the .show class for the popup window is added through JS, but currently the animation only activates upon page load. This is the JavaScript code I have: <script type="text/javascript"> $(document) ...

jquerycssaddclasscss-animations

When activating SSR in the Urql client, I encountered the following unexpected error: Server HTML should not include an <a> within a <div>

Unexpected Error Encountered while Rendering HTML at div at Styled(div) (Emotion Element) at div at Styled(div) (Emotion Element) at Flex (Chakra UI) at NavBar (Navigation Bar) at Index (Homepage) at withUrqlClient(Index) (Urql Client) at ColorModeProvider ...

htmltypescriptfrontendurql

Can three identical values from separate arrays be merged into a single array?

My code includes multiple arrays with values structured like this : Array ( [0] => Array ( [NAMA_MDS] => AGUNG RUDIYANTO [Call] => 182 [RO] => 151 [NAMA_SGRUP] => Kanzler Singles ...

phphtmlarrayscodeigniterforeach

Is there a way to convert html content into a pdf file using phantomJs in a node.JS environment?

Is there a way to use phantom.js in node.js to create a pdf file with html content and display it in the browser? ...

htmlnode.jspdfphantomjs

Retrieve a class attribute that is only visible when a checkbox is checked in Ruby using Selenium

One of my tags has the following structure: <ul id="genres-bar" > After a user selects the "Romance" check box, the background changes and the tag becomes: <ul id="genres-bar" class=" romance"> I'm trying to figure out how to access an ...

htmlcssrubyxpathselenium

What is the best way to connect multiple web pages together?

Hello everyone, I could really use some assistance with a problem I'm facing. As a newcomer to web development, I have a question about navigation bars. I've successfully created a basic webpage with a navigation bar, but now I'm unsure how ...

javascriptphpjqueryhtmlcss

Utilizing CSS and HTML exclusively, display content on hover

Is there a way to display a child div when hovering over an anchor tag? I'm looking to reveal a div with the class of botm when the cursor hovers over the anchor tag. Here's the specific layout I have in mind, so please maintain the order of tags ...

htmlcss

Issue "Invalid UTF-8" encountered while compiling sass using @import

Here is the structure of my project: project assets scripts styles app.scss bower_components node_modules public css app.css js bower.json gulpfile.js package.json I am using gulp-sass to compile app.scss into ap ...

csssassgulpzurb-foundation

Having trouble with changing the selected value in JQuery?

I'm attempting to use jQuery to set the select option, but I'm encountering an issue. It is setting the value properly, but the text is not being updated. I've experimented with .prop('selected',true), .attr('selected',t ...

jqueryhtml

Struggling with getting the tabbed slider carousel to function properly in Bootstrap 4?

I attempted to incorporate this code snippet: The only modification I made was using these imports: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootst ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Having trouble uploading an image of a varchar type from my MySQL database. Any ideas on how to fix this issue?

Currently, my PHP server is hosted on 000webhost and I am using phpMyAdmin for the database. The structure of my image row in the database table is as follows: image varchar(100) utf8_unicode_ci I am attempting to create a functionality where a user ...

phphtmlmysqldatabaseimage

Implement a hover animation for the "sign up" button using React

How can I add an on hover animation to the "sign up" button? I've been looking everywhere for a solution but haven't found anything yet. <div onClick={() => toggleRegister("login")}>Sign In</div> ...

javascriptcssreactjsonhover

Developing a Chrome browser extension tailored for parsing unique file formats

Currently, I am working on developing a compiler for a unique conditional formatting language. My aim is to enable the capability of opening files in my language directly in Chrome by simply double-clicking on them in File Explorer (I am currently using Wi ...

javascripthtmlgoogle-chrome-extensionfile-extension

Creating an eye-catching loading animation for page content using jQuery and CSS

Many websites incorporate animations to enhance user experience when content loads in the background. LinkedIn is one example of a site that features a nice animation during content loading. Below is a screenshot for reference, showcasing the type of anima ...

jqueryhtmlcssanimation

Transforming an ASPX textbox input into HTML formatted text

When I fill out the address textbox in my application for sending an inquiry email, and press enter after each line like the example below: 33A, sector -8, /*Pressed enter Key*/ Sanpada, /*Pressed enter Key*/ Navi mumbai. It should ...

c#htmlasp.netemail

Tips for shutting down a modal box without using the "x" button?

I'm currently working on creating a modal box using HTML and Javascript, and I came across this example (reference https://www.w3schools.com/howto/howto_css_modals.asp), which seems to fit my needs quite well... I made some modifications to it... &l ...

javascripthtmlmodal-dialog

Troubleshooting Issues with Integrating Bootstrap Carousel

UPDATE: When I attempt to click on either the left or right icons, it unexpectedly scrolls me down to the bottom of the page. It seems to be related to the #truespeed aspect. The carousel functions perfectly when it is on a standalone page but causes issue ...

jqueryhtmlcsstwitter-bootstrap

knockoutjs - revolutionizing the quiz-making experience

This is the knockoutjs file: $(function () { $('#info').hide(); QuizViewModel(); ko.applyBindings(new QuizViewModel()); $('#restart').click(function () { location.reload(); }); }); function Qu ...

jsonhtmlknockout.js

What are the reasons behind the failure of this specific <audio> example on certain web browsers?

Can anyone explain why this particular example of audio code (from W3Schools) fails on Firefox 16 and IE9, but succeeds on Chrome V24? UPDATE: <!doctype html> <audio controls> <source src="horse.ogg" type="application/x-msdownload"> ...

html

I'm trying to determine which jQuery event would be more beneficial for my needs - should I go with

I'm facing a dilemma On my website, I need to capture the value of a span within a modal. The value changes when the modal is opened and reverts to the old value when closed. This particular value represents the cart total in my online store. Wheneve ...

javascriptjquerycssevents