Seeking to establish uniform column heights in Bootstrap without utilizing a table

Question

Seeking to establish uniform column heights in Bootstrap without utilizing a table

I am working on making my columns in Bootstrap 3 have equal heights without using 'display: table;' as it affects the overall layout. Here is a snippet of my code:

<article>

 <div id="post-<?php the_ID(); ?>"> <!-- getting post's id --> 

   <div class="row">

    <div class="col-md-8 indx-img" style="background-image:url('...');">
    </div>

    <div class="col-md-4 text-cell">
        <h1>title</h1>
        <h3>category</h3> 
    </div>

   </div><!-- /#row -->

 </div><!-- /#post -->

</article>

I have content on the right and a column with a background image on the left that needs a specified height for the image to show properly. I want this height to be applied to the column with the text too.

To make the height responsive, I have used the following CSS so far:

CSS

indx-img {
 padding: 16% 0;
}

The issue is that this height does not affect the column with the text. My ultimate goal is to ensure both columns have equal heights and the text is vertically centered in the 'text-cell' column.

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

If you're facing challenges with CSS solutions that might disrupt your layout, utilizing JavaScript can be a viable alternative.

In this scenario, we've created a function called resize to iterate through the posts.
If the page exceeds a certain breakpoint, the post container's height is adjusted to match the image's height. Subsequently, the text container's height is set to 100% once.

If the page falls below the breakpoint, we check if the height has been defined. If so, we remove the height setting to allow for natural expansion and contraction.

The resize function is initially triggered upon page load and then linked to the window resize handler.

(Demo)

<script type="text/javascript>
    window.onload = function() {
        (function () {
            "use strict";
            var resize = function () {
                var posts = document.querySelectorAll('[id^="post"] .row'), post;
                for (var i = 0; post = posts[i]; i++) {
                    if (window.innerWidth > 768) {
                        post.style.height = post.firstElementChild.offsetHeight + 'px';
                        if(post.lastElementChild.style.height !== '100%') {
                            post.lastElementChild.style.height = '100%';
                        }
                    } else {
                        if(post.style.height !== '')
                            post.style.height = '';
                    }
                }
            };
            window.onresize = resize;
            resize();
        })();
    }
</script>

Answer 2

If you're facing challenges with CSS solutions that might disrupt your layout, utilizing JavaScript can be a viable alternative.

In this scenario, we've created a function called resize to iterate through the posts.
If the page exceeds a certain breakpoint, the post container's height is adjusted to match the image's height. Subsequently, the text container's height is set to 100% once.

If the page falls below the breakpoint, we check if the height has been defined. If so, we remove the height setting to allow for natural expansion and contraction.

The resize function is initially triggered upon page load and then linked to the window resize handler.

(Demo)

<script type="text/javascript>
    window.onload = function() {
        (function () {
            "use strict";
            var resize = function () {
                var posts = document.querySelectorAll('[id^="post"] .row'), post;
                for (var i = 0; post = posts[i]; i++) {
                    if (window.innerWidth > 768) {
                        post.style.height = post.firstElementChild.offsetHeight + 'px';
                        if(post.lastElementChild.style.height !== '100%') {
                            post.lastElementChild.style.height = '100%';
                        }
                    } else {
                        if(post.style.height !== '')
                            post.style.height = '';
                    }
                }
            };
            window.onresize = resize;
            resize();
        })();
    }
</script>

Answer 3

Answer №2

When dealing with this type of issue, I always rely on the matchHeight plugin, which seamlessly integrates with Bootstrap.

To implement this solution, simply install the plugin and assign a class of matchHeight to your col-md-8 and col-md-4 columns:


  <div class="matchHeight col-md-8 indx-img" style="background-image:url('...');">
</div>

<div class="matchHeight col-md-4 text-cell">
    <h1>title</h1>
    <h3>category</h3> 
</div>

Next, include the following script in your JavaScript file:

$('.matchHeight').matchHeight();

This fix can be applied across your entire website by following these steps, even multiple times on the same page (the plugin automatically scopes within the current "row" element to ensure that only elements within the same row are matched for size).

Answer 4

When dealing with this type of issue, I always rely on the matchHeight plugin, which seamlessly integrates with Bootstrap.

To implement this solution, simply install the plugin and assign a class of matchHeight to your col-md-8 and col-md-4 columns:


  <div class="matchHeight col-md-8 indx-img" style="background-image:url('...');">
</div>

<div class="matchHeight col-md-4 text-cell">
    <h1>title</h1>
    <h3>category</h3> 
</div>

Next, include the following script in your JavaScript file:

$('.matchHeight').matchHeight();

This fix can be applied across your entire website by following these steps, even multiple times on the same page (the plugin automatically scopes within the current "row" element to ensure that only elements within the same row are matched for size).

Seeking to establish uniform column heights in Bootstrap without utilizing a table

Answer №1

Answer №2

Similar questions

Custom directives are unable to interact with inbuilt directives

JavaScript code to generate diamond-shaped numbers

How to toggle the visibility of a div with multiple checkboxes using the iCheck plugin for jQuery

How to customize the font size in three.js CSS3DRenderer

Guide on retrieving information from the World Bank API using jQuery/AJAX despite receiving a success status code of 200, but encountering an error

Troubleshooting issue with Rails 5.2.3 AJAX request: JSON key-value pairs containing the plus sign are not being received

Having trouble with document.getElementById.innerHTML not displaying the correct content?

Guide to dynamically setting SCSS $variables in JavaScript after retrieving them from local storage in a React application

Discover the secret to opening two JPG files on YouTube using just one URL!

Fixed Div Columns on the Far Left

Preventing Javascript array elements from being overwritten: Best practices

Ensure that the HTTP GET request completes before initializing Angular using the ngOnInit lifecycle hook

Tips for sending information back to the previous screen in React Native Navigation version 5

Establish a jQuery cookie to store language preferences

Elements with inline-block display not aligning horizontally next to each other

Using React to pass a state value as a parameter in a method

What is the best way for me to comprehend these two sections of code?

Enhancing visual appeal with Carousel Slider images

Click on the button to automatically scroll to a specific component inside the dialog

Is there a way to automatically fill number fields by clicking on radio buttons using a JavaScript function?