Maintaining consistent div height in Bootstrap 4 flexbox design

I'm currently using Bootstrap 4 with flexbox enabled, but I'm having trouble making the row > col > div boxes have equal heights.

I attempted to use position: absolute, but it's not the ideal solution.

Below is a screenshot of the issue:

https://i.sstatic.net/aXMKY.png

<div class="row" >
<div class="col-xs-12" >
<div class="home_category" ></div> 
</div>
<div class="col-xs-12" >
<div class="home_category" ></div>
</div>
</div>

Although the height of col-xs-12 remains consistent, the height of .home_category varies depending on the content size.

I am in search of a solution to ensure that .home_category has 100% height, matching col-xs-12.

You can view a live demo of the issue at

Your feedback would be greatly appreciated.

htmltwitter-bootstrapcssflexbox

Answer №1

After examining your code, I have noticed that the boxes are currently adjusting their height based on the content inside them. This results in some image labels appearing on two lines while others are on three lines, leading to varying box heights.

To ensure that all boxes have the same height, you can implement the following CSS adjustment:

@media (min-width: 48em) {
.col-md-6 {
    flex: 0 0 50%;
    display: flex; /* NEW */
}

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

Ways to Implement Horizontal Scrolling in Dojo FilteringSelect Component

The select field on my form contains option values that are over 250 characters long, making it difficult for users to read them within the select box. Is there a solution to make the select field scroll horizontally or wrap the lengthy text? ...

javascripthtmlcssdojo

What is the most reliable php form mailer out there right now?

Having focused on CMS systems in my recent years of work, I haven't had the need for a form mailer in quite some time. Now, however, I require a straightforward PHP form mailer - preferably with a responsive web form. I can handle the design aspect my ...

phphtmlemailresponsive-design

Utilize data retrieved from an API to customize the appearance of buttons through the combination of React and Sass styling techniques

I retrieved data from an API and used it to create a list of buttons. The data I received includes names and color codes. { name: "bob", colorCode: "#DC7472" }, { name: "ben", colorCode: "#69DCD1" }, { name: &q ...

javascriptcssreactjssass

Looking to display a submenu next to its parent element

I have a list that is not in order: <ul> <li>Parent-1 <ul> <li>Child-1</li> <li>Child-2</li> <li>Child-3</li> </ul> </li> <li>Parent-2 <ul> <li>Ch ...

jqueryhtmlcssmenu

Unable to select checkbox within a table using Selenium WebDriver with Java

Having trouble checking a checkbox inside a table using Selenium Webdriver in Java? Even with version 2.52.0 of Selenium, the element not found error persists across different web browsers. The iFrame seems to be correct as I can interact with other compon ...

htmlseleniumxpathselenium-webdriver

Disabled radio buttons are appearing as if they have been chosen

While working on customizing the styles of radio buttons in a form, I encountered an issue where disabled radio buttons appeared selected even though they were supposed to show as disabled. Here is the code snippet that I used: input ::-ms-clear { ...

htmlcss

Tips for showcasing an uploaded image with ajax

I am looking to upload an image and display it without having to reload the page. I believe this can be achieved using Ajax form submission. However, I have tried some code but the Ajax form submit function does not seem to be working for me. Can someone p ...

javascriptphpjqueryhtmlajax

Error: Badge not responsive in Boostrap 4

I have a project to create a table of contents using BOOTSTRAP4. I researched and used https://getbootstrap.com/docs/4.6/components/list-group/. However, the Badge does not align correctly as expected, it remains fixed with the content. <ul class=&qu ...

htmlcssbootstrap-4

What is the best method for arranging multiple images in a grid while keeping them within a specific maximum width and height?

I've been staring at this problem for a while now, attempting every possible solution to resize images and maintain aspect ratio, but none seem to work in my case. Here are two images that I manually resized so you can view them side by side: highly ...

javascripthtmlcssimagelayout

Setting a div's width to cover 100% of the screen's width

I'm currently working on creating a 2 column layout using divs. The left column has a fixed size of 150 px, while the right column should extend to the right boundary of the browser. I've tried using both width:auto and width:100% values for the ...

csshtml

Having trouble with setting CSS style in <p> tags within Codeigniter framework

Why is the class mentioned in the p tag not applying in Chrome but working in IE and Firefox? <p class="p_error"><?php print $this->validation->errorValue;?></p> Here is the CSS -> .p_error{ color:red; text-align:left; font-s ...

css

What is the reason for Bootstrap requiring both a class name and an ID name for collapse functionality?

When implementing the collapse effect in Bootstrap, why do buttons need to refer to the data-toggle=collapse class and the data-target=#collapseExample ID of the panel for the effect? Wouldn't simply targeting the ID be enough to toggle its state? Co ...

jquerycsshtmltwitter-bootstrap

Why is the Material UI React select not selecting all children except for the last one?

I have a challenge with selecting specific children: const useStyles = makeStyles(theme => ({ icons: { "&>*": { backgroundColor: "red", }, }, })) This is how it looks in JSX: <Grid item> < ...

cssreactjsmaterial-ui

What is the best way to redirect to a specific page when logging out of a website?

To begin, let me outline the situation at hand. We have two distinct websites - website-A and website-B. Each of these websites is hosted on separate domains. A user has the ability to log in to website-B's homepage through the login page of webs ...

c#javascripthtmlasp.netlogout

Unnecessary spacing found within the side navigation menu

Recently, I decided to practice my web development skills by creating a basic webpage using flexbox for the topnav and CSS Grid 12 column layout for the main content. Everything was going smoothly until I encountered some extra whitespace in the sidenav se ...

htmlcssflexboxcss-grid

I am attempting to separate this "for" loop in order to generate five distinct DIV elements

Hello there! I am a beginner and I am attempting to create 5 different players by using some code that I found. Here is the code I have been working with: https://codepen.io/katzkode/pen/ZbxYYG My goal is to divide the loop below into 5 separate divs for ...

javascriptjqueryhtmlcss

Challenges with Hover Dropdowns in Bootstrap Navigation Menu

Check out this screenshot of a navbar PSD design I'm aiming for: To make my navbar dropdown show up upon hovering, I've implemented the following JavaScript: $('.navbar .dropdown').hover(function() { $(this).find('.dropdown-men ...

htmlcsstwitter-bootstrap

Disabling tooltip functionality on an element

Trying to figure out how to remove a tooltip from an element once the text is no longer truncated. The challenge lies in not being able to access the event of the tooltip itself. The tooltip is added by setting an attribute on truncation, but simply removi ...

javascripthtmlangularjsangular-ui-bootstrap

If the item has an active class, apply a new class to the parent element and all of its

If I have code like the example below and want to add the show class to the parent and ancestors. // The last `nav-item` has the `active` class <div class="nested-group nested-item show"> <div class="nested-item show"> <div class="n ...

javascriptjqueryhtmlcss

Using JQuery to implement custom validation on a text field is an effective way

How can I validate a text field using Regex and create my own validation rule for starting with "com."? Can you provide me with an example of how to do this? I want the text field to only accept values that start with com. <input id="appPackage" name=" ...

javascriptjqueryhtml