Container with equal height dimensions

I've seen a few questions on this topic before, but I can't seem to make it work.

So I have a row with two columns inside and I want them to have the same height. I've tried using d-flex, but it just won't cooperate:

<div class="row d-flex align-items-center justify-content-center h-100">
   <div class="col-12 col-md-6 col-xxl-4 ce-login__col">
      <div class="ce-registration__form">
        <form id="" class="">
            <div class="ce-registration__form__top"></div>
            <div class="ce-registration__form__bottom"></div>
        </form>
      </div>
   </div>
   <div class="col-12 col-md-6 col-xxl-4 ce-login__col">
      <div class="ce-registration__form">
        <form id="" class="">
            <div class="ce-registration__form__top"></div>
            <div class="ce-registration__form__bottom"></div>
        </form>
      </div>
   </div>
</div>
htmlcssbootstrap-4flexbox

Answer №1

Make sure to include align-items-stretch

https://getbootstrap.com/docs/5.2/utilities/flex/#align-items

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0e6c61fd48485b57ca7d7a7c6f7e4e3b203c203e23696b7a6f3f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row d-flex align-items-stretch justify-content-center h-100">
   <div class="col-12 col-md-6 col-xxl-4 ce-login__col text-bg-primary">
      <div class="ce-registration__form">
        <form id="" class="">
            <div class="ce-registration__form__top"A<br /><br /><br /><br /></div>
            <div class="ce-registration__form__bottom">B</div>
        </form>
      </div>
   </div>
   <div class="col-12 col-md-6 col-xxl-4 ce-login__col text-bg-success">
      <div class="ce-registration__form">
        <form id="" class="">
            <div class="ce-registration__form__top">C</div>
            <div class="ce-registration__form__bottom">D</div>
        </form>
      </div>
   </div>
</div>

Answer №2

In my opinion, you might consider removing the custom height of the columns and experimenting with align-item:streach;

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

What steps do I need to take to make sure the Google font I downloaded is functioning properly in my React project

I have encountered an issue with using a Google font in my project... After downloading the font, I included the following CSS code: @font-face { font-family: "Work Sans"; src: local("Work Sans"), url(../src/Fonts/Work_Sans/Wor ...

cssreactjsgoogle-fonts

Angular 10: Oops! An issue occurred stating that the mat-form-field needs to have a MatFormFieldControl inside

When attempting to set up a form group on a page, I encountered the following error: ERROR Error: No value accessor for form control with name: 'modalidade' at _throwError (forms.js:2431) at setUpControl (forms.js:2339) at FormGroupDirective.addC ...

htmlangulartypescript

Enhance the HTML content using a JavaScript function

Here is the code that I have: <label>Brand</label></br> <select name="brand" id="brand" onChange="changecat(this.value);"> <option value="" selected>Select Brand</option> <option value="A">AMD</option&g ...

javascripthtml

The getJSON API functions properly on a local machine but encounters issues when deployed on a

I have a vision to create a web application that can display the weather of any city based on user input. I've divided my project into three files - index.html for collecting user input, index2.html for retrieving and displaying the data, and a CSS fi ...

javascripthtmlcssjsonwebserver

Unable to adjust image size on an HTML page with the bootstrap carousel feature

Struggling to resize images on my webpage as they are displayed in full size. Utilizing Bootstrap 4 carousel component but experiencing non-responsive images. .carousel-item { width: 100%; height: auto; object-fit: cover; } The code for the ...

htmlcssbootstrap-4

Tips for resolving the issue of "unable to load style sheet" in Bootstrap

I'm having trouble getting the grey color navbar to show up on my website. Instead, I keep getting a red error sign at the bottom saying "Stylesheet could not be loaded". I've tried removing one CSS file at a time, but nothing seems to be working ...

javascripthtmlcsstwitter-bootstrap

Align the font-awesome icon in the middle of the input box vertically

Is there a way to vertically center the font-awesome icon inside an input box using Bootstrap without setting margins, padding values, or adjusting the height of the input? .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .inset-y-0 { top: ...

cssbootstrap-4

Selecting elements using XPath

My goal is to target an i element using the following XPath: //div[contains(text(), "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32565356564153565341725e5d5d1c515d5f">[email protected]</a>")]//parent//i[contains(@c ...

htmlseleniumxpathselenium-webdriver

Visitors may not immediately notice the CSS/JavaScript modifications in their browsers

Currently, I am working on a web application utilizing Spring MVC and Hibernate, deploying it on Apache Tomcat 8. Most of my users access the app using Google Chrome. However, I have encountered an issue where whenever I update the CSS or JavaScript files ...

javascriptcssapachetomcatbrowser-cache

Is it possible to extract form data from a div tag based on its class name?

I'm working with some code that looks like this: var iconContainer = document.getElementById('iconContainer'); var icon = iconContainer.getElementsByClassName("item"); for (var i = 0; i < icon.length; i++) { icon[i].addEventListener ...

javascriptjqueryhtmlnode.jsfrontend

When the page is zoomed in, the image exceeds the boundaries of the parent div

I attempted to position the div elements but did not achieve the desired outcome. .tab-vertical { border: 1px solid black; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" dat ...

htmlcssbootstrap-4cdn

Transferring user-selected values from JavaScript to a PHP file

When sending values from JavaScript to a PHP file, everything works smoothly when all the values are collected. Step1 functions perfectly as both fields are mandatory. However, in Step2, values are only sent when all the fields are selected. There are co ...

javascriptphpjqueryhtml

Dart and external CSS and JS libraries and tools

As I prepare to dive into developing my very first web application, one technology that has caught my eye is Google Dart. The idea of using a new, innovative approach to web development excites me, and I am seriously considering utilizing it for my project ...

javascriptcssweb-applicationsdart

Having trouble getting CSS to center text properly. It just won't cooperate

After spending 2 days trying to figure this out on my own, I have come to a dead end. It seems that my lack of expertise in CSS is the root cause of the issue. Here is the code snippet I am working with: <table class="demo"> <tr> <th style ...

htmlcss

Is it permissible to have empty elements in HTML for accessibility purposes?

Can you help me with a question I have? I was informed that utilizing code like the following is not recommended for creating accessible HTML: <span class="fa-stack fa-lg"> <i class="fa fa-cloud fa-stack-2x"></i> <i class="fa fa-c ...

htmlaccessibilityscreen-readers

Finding elements based on their class can be accomplished by using XPath

Can you show me how to effectively utilize the :not selector to choose elements in a scenario like this: <div class="parent"> <div class="a b c"/> <div class="a"/> </div> I am trying to select the div with only the class & ...

javahtmlxmlseleniumxpath

Tips for reusing an SVG element that is embedded on the same page

My HTML5 page includes an embedded SVG icon element. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> </head> <body> ...

htmlsvg

Define the width of jqgrid

I have been utilizing SmartAdmin jqgrid to showcase data in tabular format. The number of columns in the datatable changes dynamically each time. I am converting the DataTable to a JSON object and assigning it to the jqgrid. However, it appears that jqgrid ...

htmlcssjsonjqgridsmartadmin

What is the best way to horizontally align my divs and ensure they stack properly using media queries?

My layout is not working as expected - I want these two elements to be side by side in the center before a media query, and then stack on top of each other when it hits. But for some reason, it's not behaving the way I intended. I've tried to ce ...

javascripthtmlcss

Loading Bootstrap Modal with click event triggering

I am currently working on a project where I need to load ajax content into a bootstrap modal when a link is clicked. I have been able to successfully load the content without any issues, but I am facing some difficulties triggering the modal window to open ...

javascriptjqueryhtmlwordpresstwitter-bootstrap