Bootstrap's ability to display panels of equal height across multiple rows is a game

Just started using Bootstrap 4 after being familiar with Foundation for years.

In Foundation, equalizer was a tool to ensure divs had the same height, which would be applied to all divs within a container. I understand that Bootstrap uses Flex, but I'm struggling to figure out how to make all panels the same height. The h-100 class only matches the height of the boxes in that specific row. I need all boxes to adjust their height based on the tallest box, regardless of which row they are in.

For example, in this scenario, all the boxes should have the same height:

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

<div class="container">
    <div class="row">

        [LOOP STARTS]

            <div class="col-sm-12 col-md-6 col-lg-4 mb-4">  
                <a href="#">
                    <div class="panel-link h-100">

                        <i class="fas fa-link"></i> LINK TEXT HERE

                    </div>
                </a>
            </div>

        [LOOP ENDS]

    </div>
</div>
csstwitter-bootstrapflexbox

Answer №1

Although it's not a built-in feature of Bootstrap, you can still achieve equal column heights using Javascript.

Check out this jQuery snippet:

$( document ).ready(function() {
   var maxHeight = 0;
   $('.row-eq-height').each(function( index, element ){
      var height = $(this).height();
      if (height > maxHeight) {
        maxHeight = height;
      }
  });

   $('.row-eq-height').height(maxHeight);
});

This code snippet will set equal heights for elements with the class "row-eq-height" on your page.

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

Centered vertically on the right side of a div, a CSS arrow is positioned

Hello, I am seeking a way to vertically center a CSS triangle/arrow on the right side of a div using pure CSS. Unfortunately, I can't include images due to my low reputation. Currently, my code is not functioning properly and lacks cross-browser comp ...

htmlcsscss-shapes

Tips for aligning a div underneath another div in a centered position

I am attempting to align .rij_lessenrooster below .rij_weekdagen so that it is centered under each day. The teacher advised me to create a column and then try it, but it did not resolve the alignment issue. The .rij_weekdagen consistently appears off to th ...

htmlcssflexbox

Switching out text when hovering with Jquery or JavaScript

Is there a way to use jQuery or JS to make the text and icon disappear when hovering over a div, and replace it with "Read More"? I've looked at some guides but they only remove one line of text instead of clearing the entire div and displaying "Read ...

javascriptjqueryhtmlcss

Dynamically switch between showing more and showing less content on each div

Whenever the specific show more button is clicked, the content should be displayed without causing the entire component to re-render. I have tried using a useState, but each time the button is clicked, the whole component re-renders, resulting in long load ...

javascriptcssreactjsbootstrap-4material-ui

When updating the HTML content, JavaScript is outputting the code as text instead of running it

I am encountering an issue with adding the body content of a JSON file, which contains HTML code, to my existing HTML. Instead of executing the code, it appears as text within paragraph or header elements. I have searched through various discussions but ha ...

javascripthtmlcssjson

Inserting a border both above and below an element may result in the parent overflowing

I am facing an issue similar to the following: div.parent { height: 100px; padding: 20px; box-sizing: border-box; overflow: auto; } div.parent div.thing { height: 20px; width: 90%; border: 1px solid black; } <div class="parent"> ...

htmlcssborder

Enhancing CSS compatibility for Internet Explorer 9 with CSS3

I need to create a Jagged Edge border without relying on an image, and I want it to be compatible with IE9 and newer versions. Currently, it works in most browsers but not in IE9. Any suggestions or advice would be greatly appreciated. Thank you! Below is ...

internet-explorercss

HTML and JavaScript code to desaturate or grayscale image rollovers without the need for additional image duplicates or sprites

Is there a way to achieve grayscale to color image rollover effects without duplicating images or using sprites? I'm looking for an alternative technique that can accomplish this. Any suggestions on how to implement it? ...

javascriptjqueryhtmlcssrollover

In HTML, the size and position of an <a> element cannot be altered or adjusted

I am having trouble with an anchor element that is contained within a div. No matter what I try, I cannot resize or move it up or down without it covering its sibling element. I have attempted using transform-translate and margin properties, but to no avai ...

htmlcsssassscss-lint

Using the combination of z-index and visibility:hidden makes the button go completely undetect

Can someone please review this code? .parent { visibility: hidden; position: relative; z-index: 1; } .child { visibility: visible; } <button class="parent"> <span class="child">content</span> </button> I' ...

cssbuttonfirefoxz-index

I am experiencing some layout problems with Joomla K2

Having some alignment issues in the header section of my article. I took a screenshot, but you can also check out the live page here. See the pic below: Upon inspecting the area I wanted to adjust, I discovered: span.itemAuthorDetailss position: relativ ...

htmlcssjoomla

The positioning of the second wrapper in absolute does not match the behavior of the first wrapper

Working with CSS can be tricky, especially when dealing with nested navigation elements. I am facing an issue where the styles that work perfectly for one dropdown menu do not function as expected for subsequent nested navigations. My objective is to disp ...

htmlcssbootstrap-4

What is the reason behind the modification in flex item size when align-items property is applied?

When creating the responsive design, I utilized flexbox. Surprisingly, without changing the size of each flex-item, applying align-items:center caused the size of the first flex item (PICTURE 2) to change when displayed in a vertical view. On the other han ...

cssflexboxresponsive-design

`How to perfectly place multiple text blocks and images using CSS`

Check out this screenshot to see the issue I'm facing: Here is the HTML code: <div class="parent_process"> <div class="first_process"><img src="images/exprimer-besoin-telephonie.png"/><span style="width:18%">You fi ...

htmlcss

The CSS slider is stuck on the fifth slide and won't move past it

I encountered an issue with the CSS slider I am using, as it only had five radio buttons / slides in its demo. After attempting to add more slides, I noticed that the slider was not scrolling to the new slides. I'm unsure where I made a mistake in m ...

htmlcssslideshow

Guide to positioning an image next to text within a table: Utilizing jQuery DataTable to organize images alongside text in a table header

When using the jQUery DataTable plugin, I encountered an issue where the table header text and the image for sorting are not properly aligned. Here is how it looks: https://i.sstatic.net/Kqgz9.png (I want the arrow and the text to be aligned horizontally ...

css

Can I create a div with a rounded right side?

Is there a way to give a div a slightly rounded right side using CSS? If so, can you show me how in this fiddle template: http://jsfiddle.net/z2hejemu/ HTML <div class="rounded-side"> <p>By default, this div is rectangular. I would like t ...

htmlcss

Removing the arrow icon preceding an image in a new line when dealing with dynamic data

My Angular project renders dynamic content that includes the following HTML structure: <div class="complted" *ngFor="let step of letStep1to7; let i = index; let first = first"> <table> <td class="steps" ...

javascriptcssangularbootstrap-4

I require a breakdown of the JavaScript code, please

Are you struggling with a code snippet that involves CSS, JavaScript, and HTML? Let's take a look at the complete code: <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="http://snipplicious.com/css/bo ...

javascriptjqueryhtmlcss

Nav bar width remains stagnant despite varying content lengths

My navigation bar looks great with 5 objects, but as soon as I add 3 more, it suddenly drops below the main header. Why is this happening? 5 Objects: 7 Objects: HTML: <div id="header"> <div class="w960"> <div id="logo"> ...

htmlcsswidthnav