Achieving equal height in Bootstrap columns

Artwork

Hey everyone, I'm facing a small dilemma.

Currently, I am tackling a project with a unique design. Within the layout of this project, there is an image section that is causing some trouble for me.

I am aiming to create a portion of the website where products are displayed on the left, middle, and right sections. My current code looks like this:

<div class="container-fluid">
  <div class="row">
    <div class="col-12 offset-lg-1 col-lg-3 product-left">
      <div class="card"></div>
    </div>
    <div class="col-12 col-lg-4 product-middle">
      <div class="card pm-first"></div>
      <div class="card pm-second"></div>
    </div>
    <div class="col-12 col-lg-3 product-right">
      <div class="card"></div>
    </div>
  </div>
</div>

I am struggling to ensure that the two products in the middle always have the same height as the ones on the left and right sides.

I would appreciate any guidance or assistance on this matter. Right now, I am unable to find a solution, so forgive me for this basic question!๐Ÿ˜…

htmlcssflexboxbootstrap-4

Answer โ„–1

Give this a shot

Include the "row-flex row-flex-wrap" class in your row element

<div class="container-fluid">
    <div class="row row-flex row-flex-wrap">
        <div class="col-12 offset-lg-1 col-lg-3 product-left">
            <div class="card"></div>
        </div>
        <div class="col-12 col-lg-4 product-middle">
            <div class="card pm-first"></div>
            <div class="card pm-second"></div>
        </div>
        <div class="col-12 col-lg-3 product-right">
            <div class="card"></div>
        </div>
    </div>
</div>

CSS File

.row-flex, .row-flex > div[class*='col-'] {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex: 1 1 auto;
}
.row-flex-wrap {
    -webkit-flex-flow: row wrap;
    align-content: flex-start;
    flex: 0;
}
.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
    margin: -.2px; /* hack adjust for wrapping */
}
.container-flex > div[class*='col-'] div, .row-flex > div[class*='col-'] div {
    width:100%;
}
.flex-col {
    display: flex;
    display: -webkit-flex;
    flex: 1 100%;
    flex-flow: column nowrap;
}
.flex-grow {
    display: flex;
    -webkit-flex: 2;
    flex: 2;
}

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 is the best way to animate specific table data within a table row using ng-animate?

Are you working with Angular's ng-repeat to display a table with multiple rows? Do you wish to add an animation effect to specific cells when a user hovers over a row in the table? In the scenario outlined below, the goal is to have only certain cell ...

javascripthtmlcssangularjsgsap

Update the content within an HTML tag using JavaScript

I've been attempting to update the text within the li tag using plain javascript. The structure of the HTML will remain consistent: <section id="sidebar-right" class="sidebar-menu sidebar-right sidebar-open"> <div class="cart-sidebar-wrap" ...

javascripthtml

jQuery Mobile offers a feature that allows users to create collapsible elements

I recently ran a coding validation check at and encountered the following errors: <div data-role="collapsible-set" id="col"> <div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" class="ui-nodisc-icon"> ...

jqueryhtmlcss

Troubleshooting Media Queries Problems in HTML and CSS

Check out the code snippet below: //Modifying text content (function() { var texts = $(".altered"); var textIndex = -1; function displayNextText() { ++textIndex; var t = texts.eq(textIndex) .fadeIn(2000) if (textIndex < te ...

javascripthtmljquerycssresponsive-design

Always maintaining a responsive and square aspect ratio div

I am developing a CSS and JavaScript-based game that requires the game field to be square and adjust its width and height based on the height of the viewport. In case the viewport width is smaller than the height, I need the field size to adapt while maint ...

htmlcssresponsive-design

The Vue2 @click event does not function properly when using v-html within a different component

I currently have a sign up form that includes an Alert component for displaying any errors. One of the conditions may prompt a message saying "You already have an account, click here to log in". The error messages are passed as props to the "Alert" compon ...

javascripthtmlvue.jsvuejs2

Customizing Eclipse Outline View for Cascading Style Sheets (CSS) Files

Is there a way to modify Eclipse's Outline view for CSS files? Specifically, how can I make the outline display comments and create collapsible ranges for groups of CSS rules? Include comments in the outline Create collapsible ranges for groups of ...

csseclipseeclipse-wtpoutline-view

Tips for Avoiding Line Breaks in CSS Divs

I am currently designing a website menu with items such as Home, Contact us, and About us. Each item is styled with a background color and text size of 125X30. I initially used the float property in CSS to align them correctly in a single line from left ...

phphtmlcsslayout

Some characters are not compatible with the CSS writing-mode feature

There seems to be an issue with the CSS writing mode not applying correctly to the symbol 'โ„–'. Here is an example: <html> <head></head> <body> <p style="writing-mode: vertical-lr;"> ะะพะผะตั€ โ„– ...

css

What is the best way to transfer data entered into a textbox through an onclick Alert event into a database?

UI https://i.stack.imgur.com/c2cqo.png Here is the PHP code I have been struggling with. It is meant to save input data into a database, but I can't seem to get it right: if (isset($_POST['rjctrsn-data']) && !empty($_POST['rjc ...

javascriptphphtml

`Is there a way to conceal a div class when the input id value is not filled in?"`

I've hit a roadblock with this issue that's been troubling me for days. I would greatly appreciate any assistance in solving it. Working on a Wordpress theme, I have an options panel where users can input their Twitter username. My goal is to di ...

phpjquerywordpresshtmlhide

What causes Firefox's CPU to spike to 100% when a slideshow begins that adjusts the width and left coordinates of certain divs?

Seeking Advice I'm in need of some help with identifying whether the code I'm working on is causing high CPU usage in Firefox or if it's a bug inherent to the browser itself. The situation is getting frustrating, and I've run out of so ...

javascriptjqueryhtmlcss

What is the most effective way to extract content values from different divs for calculation using jQuery?

I am working on creating a function that retrieves the content values from the <div class="rowtabela"> div and reads the nodes of <div class="item v_...">. Check out my code below: <div class="adicionados" id=& ...

javascripthtmljqueryajax

How can I generate rotating images using jQuery or JavaScript similar to the one shown here?

http://www.example.com/ On a website similar to example.com, I noticed that when hovering over one of the topics listed, the image rotates. I am interested in creating this interactive effect using either jQuery or JavaScript. Is there a method to access ...

javascriptjqueryhtml

What is the best way to arrange two buttons in a row with a border separating each row?

I am currently working with angular 8 and I am in need of creating a webpage design using HTML, CSS, or Bootstrap. The issue I am encountering is how to align every two buttons next to each other with borders, and once the first row is completed, move to ...

htmlcssbootstrap-4angular8text-align

Shift div position when clicked and employ jQuery animations

I have been attempting to add animation to a DIV element by using jQuery. The goal is to move the DIV from the center to the left when it is clicked, but I am encountering some issues. The parent div has a position of "relative", and my initial idea was to ...

javascriptjqueryhtmlcss

Creating a custom colored progress bar in Angular 2 using Bootstrap 4

I've been working on implementing a bootstrap progress bar with ng-bootstrap components. The documentation outlines 4 preset coloring options using the directive "type": "success", "info", "warning", or "danger". () To customize the colors, I made ad ...

angularbootstrap-4ng-bootstrap

JavaScript fails to function properly on FireFox

I'm currently troubleshooting a script that works in Chrome but not in FireFox. I suspect it's due to the webkit syntax, so I tried converting it to a standard gradient without success. Can you help me identify what's causing the issue? Web ...

javascriptcss

Creating a sticky popup feature for your Chrome extension

Just starting out with chrome extensions and looking to create one that appends an external class to a selected tag. For example, let's say we have the following tag: <h1>extension</h1> When the user clicks on this element, I want to ad ...

javascriptjqueryhtmlcssgoogle-chrome-extension

Can columns in Bootstrap be used within a row without a container?

I am currently using bootstrap 4.6.0 and I have a question about the following code structure. While everything seems to be functioning correctly, I am uncertain if I should be utilizing a different container: <div class="container-fluid"> ...

htmlbootstrap-4col