Height Issue with Nested Columns in Bootstrap 5

My nested columns are giving me trouble with their height. I want them to have equal heights on both big and small screens. Currently, the sizes look perfect on the largest and smallest viewports, but not on medium-sized ones. Check out examples on codepen: Desired behavior of columns: https://codepen.io/marawa/pen/rNyRLyZ

https://i.sstatic.net/Kw4bo.png Current behavior (check responsiveness): https://codepen.io/marawa/pen/xxqBOde [

    <div class="container-fluid">
  <div class="row rad1 justify-content-center">
    <div class="col-md-5 col1">
      <h2 class="text-center">Vasketips</h2></br>
      <p>Diamondcare er en keramisk coating...</li>
    </ul>

    </div>
    <div class="col-md-5 col2">
      <div class="row rad2 justify-content-center">
        <div class="col-12 col3">
           <div class="ratio ratio-16x9">
            <iframe
              src="https://www.youtube.com/watch?fbclid=IwAR2KcXLf_v8knVxaJzKdD7WpLzJGrdrqd1pG_kbzB5arEKpRkKPSNvTh9h4&v=HVp1321oon8&feature=youtu.be"
              allowfullscreen
            ></iframe>
          </div>
        </div><!--end of col3-->

        <div class="col-12 col4">
                          <h4>Har du spørsmål?</h4>
            <div class="mb-3">
              <label for="exampleFormControlInput1" class="form-label">E-post</label>
              <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Din e-post">
            </div>
            <div class="mb-3">
              <label for="exampleFormControlTextarea1" class="form-label" placeholder="Skriv ditt spørsmål her...">Spørsmål</label>
              <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
            </div>  
            <div class="mb-3">  
            <input class="btn btn-custom" type="submit" value="Submit">
          </div>
        </div><!--end of col4-->

      </div><!--end of rad2-->
    </div><!--end of col2-->
  </div><!--end of rad1-->
</div><!--end of container-fluid-->

I am looking to achieve equal column heights across all viewports until they collapse in the smaller screens. If that is not possible, then I would like them to transition directly from full size to collapsed when moving from full size to medium size.

I suspect the disparity in heights may be due to the specific Bootstrap code used for the video and form placement with margins and padding. Despite reading Bootstrap 5 materials and attempting to fix the issue, I haven't had any luck. Hoping someone here might have the solution!

Answer №1

When using Bootstrap, the columns are usually of equal height, except for the right-hand column where a row will only expand to the height of its children unless you utilize the h-100 class.

By applying the h-100 class to the row, both col-12 columns will evenly occupy the available space.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30525f5f44434442514070051e001e01">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<style>
    html,
    body {
        height: 100%;
    }

    body {

        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    /* change the background color */
    .navbar-custom {
        background-color: rgba(255, 255, 255, 0.1);
    }

    /* CSS only for examples not required for centering */
    .container {
        height: 100%;
    }

    p {
        font-size: 16px;
    }

    .col1 {
        ...
...
            </div>
            <!--end of rad1-->
</div>
<!--end of container-fluid-->

To ensure that the video occupies its own area and the form is positioned directly below it, you can change the row's flex direction to column and use flex-grow to make the form column expand to fill the available space.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81e3eeeef5f2f5f3e0f1c1b4afb1afb0">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<style>
    html,
    body {
        height: 100%;
    }

    body {

        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    /* change the background color */
    ...
              ...  
                </div>
                <!--end of col4-->

            </div>
            <!--end of rad2-->
        </div>
        <!--end of col2-->
    </div>
    <!--end of rad1-->
</div>
<!--end of container-fluid-->

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

Adjusting the height of a card in Reactstrap

I am currently exploring Reactstrap and aiming to ensure a specific Card adjusts according to the size of the window by setting its aspect ratio using percentages rather than pixels. Interestingly, while adjusting the width works as desired, I'm faci ...

What is the process for incorporating data- attributes into ExtJs-generated HTML?

Currently working with ExtJs 4.1. In the process of developing a panel (for instance), I want to incorporate one or more "data-" attributes in the generated html, such as data-intro="some text" data-step="1" Any tips on how to achieve this? ...

What is the reason behind Google Font's decision to preconnect to fonts.googleapis.com?

I've been looking to incorporate the Quicksand Font into my website, and Google suggested adding the following code: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="h ...

What is the best approach for creating HTML and CSS layouts: focusing on margin/padding or positioning?

When it comes to designing with HTML5 and CSS3, is it more beneficial to rely on margin and padding for layouts or should positioning be the main focus? I have always combined both methods to achieve desired outcomes but there are examples where each appr ...

Show or hide a specific element based on whether a certain radio button is selected or deselected

After successfully displaying an element on radio button selection, I encountered the issue of the selected element remaining visible when another radio button in the group is chosen. What aspect am I overlooking? Regarding hiding elements with vanilla Ja ...

The issue of the color CSS rule not being applied to the button element when transitioning from disabled to enabled on browsers like Safari 14+ is a common challenge

There seems to be an issue with frontend form validation code affecting the disabled attribute of a submit button within a form. Two different css rules are applied for the enabled and disabled states, including changes in the text color of the button ele ...

Tips for keeping the scroll position of a bootstrap table when reloading the page

Displayed below is a bootstrap table with specific features. <div class="row"> <table id="question-selection" class="table table-sm table-hover table-wrapper"> <tbody> {% for placer in chapter_questions %} ...

What is the best way to include multiple selected option values from select2 in form.serialize()?

I am trying to use select2 for selecting multiple options in HTML and then send the selected values as an array using form.serialize() to update a database field. However, my form also contains other input fields. How can I achieve this? Here is my HTML c ...

Row buttons in a mat-table that can be clicked individually

In my mat-table, each row represents an audio recording for a call. At the end of each row, there is a play button that plays the respective audio file when clicked. However, whenever I click any play button, the correct audio file plays but all the play b ...

Using CSS and JavaScript to hide a div element

In my one-page website, I have a fixed side navigation bar within a div that is initially hidden using the display:none property. Is there a way to make this side nav appear when the user scrolls to a specific section of the page, like when reaching the # ...

Modify CSS to switch body background image when a DIV is hovered

Feeling a bit lost on where to start with this issue. My divs are positioned as desired on the page. Just to clarify, I am utilizing CSS Grids for this. In short, all I'm wondering is if it's possible to change the background of the body elemen ...

Bootstrap4 does not support the <button> element

How can I achieve a 'collapse icon' floated to the left followed by Copyright © using Bootstrap 4? I've looked at similar questions on this topic, but none seem to provide a direct answer. Other questions contain different code with ob ...

Adjust the text orientation using CSS within an SVG element

Here is the SVG code snippet that I am working with: https://jsfiddle.net/danpan/m3ofzrc1/. It generates the image shown below. The image consists of two lines of text wrapped around a circle: HELLO_WORLD_1 HELLO_WORLD_2 I want to change the direction ...

The `innerHTML` function is responsible for closing HTML

My switch structure is set up as follows: switch (ratio) { case "16:9": imgContainer.innerHTML = '<img src="images/test-rata-de-aspect.jpg">' break case "4:3": imgContainer.innerHTML = '<img src="image ...

Incorporate dynamic HTML into Angular by adding CSS styling

Just starting out with Angular and have limited front-end experience. I'm feeling a bit lost on how to proceed. Currently, I have a mat-table with a static datasource (will connect to a database in the future), and I need to dynamically change the bac ...

Issue arises when CSS selectors do not function properly with absolutely positioned divs

I am experiencing an issue with my CSS code that is functional on CodePen but not on my actual website. I am attempting to target the .appraisals class for manipulating the background color of an opaque screen slider containing information. Despite using a ...

Alter the color of the text within the `<li>` element when it is clicked on

Here is a list of variables and functions: <ul id="list"> <li id="g_commondata" value="g_commondata.html"> <a onclick="setPictureFileName(document.getElementById('g_commondata').getAttribute('value'))">Variable : ...

Is it advisable to utilize CSS3 media queries to serve varied image sizes for retina display devices?

Although many questions similar to mine have been asked before, I believe my situation is slightly different. I have recently created a mobile app using JQM + Cordova/PhoneGap. In the beginning, I utilized large images aimed at retina display devices and ...

Tips on achieving horizontal scrolling for div overflow instead of wrapping onto a new line

It's a frequent occurrence in mobile apps to have a navbar with selectable text options that overflow horizontally without breaking into a new line. Instead, users must scroll horizontally to access all the options available. Is there a way for me to ...

Sending a base64 image of a canvas to a servlet

I have a JavaScript function that uploads HTML5 canvas base64 image data to a servlet. Here is the code: function saveDataURL(a) { var postData = "canvasData="+a; var ajax = new XMLHttpRequest(); ajax.open("POST",'uploadPhoto.cgi',tr ...