Creating identical height columns with uniform inner elements is a problem that needs to be solved with caution. The proposed solution

Issue: I need to create a responsive layout with 5 columns, each containing an image, title, and text. The goal is to align the images separately, titles together, and texts individually while ensuring that all elements in a row have the same height.

Solution implemented: I was able to accomplish this by iterating through the elements I wanted to equalize in height, determining the maximum height, and setting all elements to that height using JavaScript. Additionally, I included a script to repeat this process whenever the window is resized. You can view a demo of my solution on CodePen.

Seeking advice: I am looking for a best practice approach to achieve this outcome. I believe there should be a way to do this purely with CSS.

Thank you everyone!

javascripthtmljquerycssbootstrap-4

Answer №1

If you are looking for a way to create cards with equal width and height, consider using Bootstrap's built-in card decks. Instead of relying on rows and columns, give card decks a try:

<div class="container mt-5">
    <div class="card-deck">
        <div class="card">
            <img class="card-img-top" />
            <div class="card-body">
                <h1 class="card-title text-center" />
                <p class="card-text" />
            </div>
        </div>
        <div class="card" />
        <div class="card" />
        <div class="card" />
        <div class="card" />
    </div>
</div>

By wrapping your content in .card, the images should align automatically.


To handle overflow in titles, one strategy is to display "..." when they exceed a single line. This ensures aligned titles that occupy only a single line. Bootstrap provides a class for truncating text: .text-truncate:

<div class="card">
    <img class="card-img-top" />
    <div class="card-body">
        <h1 class="card-title text-center text-truncate" />
        ...
    </div>
</div>

These adjustments will help achieve results like:

https://i.stack.imgur.com/W6zP3.png


demo: https://jsfiddle.net/davidliang2008/uv4zbomL/34/


This may not be perfect, but it provides a starting point for your project.


Update: Ensuring Complete Title Display

To show the title entirely without truncation, use the flexbox technique by setting the .card-body as a flex container in column direction. This allows you to adjust the card header's margin bottom to push other content down. The recommended Bootstrap classes for this are: d-flex flex-column and mb-auto:

<div class="card">
    <img class="card-img-top" />
    <div class="card-body d-flex flex-column">
        <h1 class="card-title text-center mb-auto" />
        ...
    </div>
</div>

https://i.stack.imgur.com/OBFsc.png


demo: https://jsfiddle.net/davidliang2008/uv4zbomL/47/

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

Generating unique identifiers for jQuery carousel

<div id="container_01"> <div class="pikachoose"> <ul id="pikame" class="jcarousel-skin-pika"> <li> <img id="main_photo" name="main_photo" src="image.jpg" width="520" height="380" class="del ...

jquerycarousel

Positioning two buttons with one on the left and the other on the right

I am currently looking to add an ADD button next to the VIEW button in this layout. An example of what I am trying to achieve can be seen at where you can click on the GRID VIEW icon. <div class="desktop_view product-view grid-list-row-view hide" sty ...

css

Steps for toggling between enabling and disabling the 2 instances of bvalidator

Running on my form are two instances of bvalidator found at . The first instance validates the entire form, while the second instance only partially validates the same form. In total, the form contains 2 buttons: The first button saves form data upon va ...

javascriptjqueryvalidation

Exploring the fundamentals of authentication with Express JS

Currently, I am encountering a challenge while attempting to implement basic authentication with Username and Password using Express JS. The problem lies in the fact that when I try to incorporate an if statement within an app.use() function, it does not s ...

javascriptexpresscurllocalhost

Using Vue.js - Incorporate filtering functionality within the v-for loop

I've successfully implemented a Vue filter that restricts the length of an array to n elements. It functions perfectly when used like this: {{ array | limitArray(2) }} Now, I'm attempting to utilize it within a v-for loop as follows: <li v- ...

javascriptvue.jsvuejs2vue-componentv-for

Using jQuery for a smooth transition with fadeIn and fadeOut Effect

After reviewing various posts in the community, I have not been able to find a solution for my specific issue. However, I did come across some HTML and jQuery code that was somewhat similar but didn't quite meet my requirements. Just to be transparent ...

jqueryfadeinfadeout

Is it possible to prevent users from clicking on a jQuery UI Datepicker?

Is it possible to disable the functionality of a jQuery UI Datepicker so that clicking on it does nothing but display the date? I attempted: $("#calendar").datepicker({ disabled: true, altField: '#note_date', maxDate: 0 }); Unfortu ...

javascriptjqueryjquery-uidatepickeruidatepicker

Ensuring Consistent Height for Bootstrap Card Headers

I am currently working with bootstrap cards on two different web pages. The challenge I am facing is that on one page, the header text has a fixed height so I can easily match their card-header height using min-height. However, on the second page, the card ...

javascripthtmlcssbootstrap-4

Order a portion of a JSON array according to another part of the same array

Having a json array that needs sorting in JavaScript. The EventName field should match the respective Age fields like 01-10 Days and 10-20 Days. [ {Age: "01-10 Days", EventName: "Invoice AP Review", Value: 1, ActiveInvoices: []} ,{Age: "01-10 Days", Even ...

javascriptarraysjson

Using Angular expressions, you can dynamically add strings to HTML based on conditions

I currently have the following piece of code: <div>{{animalType}}</div> This outputs dog. Is there a way to conditionally add an 's' if the value of animalType is anything other than dog? I attempted the following, but it did not ...

javascripthtmlangularjs

Encountering a 404 error while sending a session ID in a Post request using AngularJS

My services are hosted on a remote server, and I am consuming these services in a local AngularJS app. Everything works fine with REST requests that do not require a SessionID in the header. However, when I add the Session ID in the header, it does not wor ...

javascriptangularjscross-domain

Having trouble with PHP not receiving data when using a $.ajax POST request?

I'm facing an issue where my code seems to be correctly passing a JavaScript variable to PHP. On the JavaScript side, everything works fine - I receive success messages and see the data in the network tab. However, on the PHP side, I am unable to retr ...

javascriptphpajaxpost

Looking to display the ng-option in two lines within Angular 6?

How can I display data in a select dropdown with two lines for each option? I am currently using ng-select. <ng-select [(ngModel)]="selectedData" placeholder="Select Data"> <div *ngFor="let data of Data"> <ng-option [value]="da ...

htmlangularangular-ngselect

Arrange a pair of div containers side by side on the webpage without the need to alter the existing

Is there a way to align these two div side by side? <div class="main_one"> <div class="number_one">Title A</div> </div> <div class="main_two"> <div class="number_two">Title B</div> </div> <div class=" ...

cssangularjsreactjstwitter-bootstrapsass

Using the jQuery library to make a request to the PasteBin API with

Hey there, I'm currently working on incorporating jQuery $.post with the PasteBin API to generate a PasteBin page and obtain the URL it supposedly returns. This is what my code looks like at the moment: $('#send_code').click(function(){ ...

jquerypostpastebin

I'm having trouble finding the issue in this straightforward code snippet. Can someone pinpoint the error for

(server-side) const express = require('express'); //setting up app instance const app = express(); //middleware const bodyParser = require('body-parser'); app.use(express.urlencoded({extended: false})); app.use(express.json()); //imple ...

javascriptnode.jsexpresspostserverside-javascript

How can the outcome of the useQuery be integrated with the defaultValues in the useForm function?

Hey there amazing developers! I need some help with a query. When using useQuery, the imported values can be undefined which makes it tricky to apply them as defaultValues. Does anyone have a good solution for this? Maybe something like this would work. ...

javascriptreactjstypescriptreact-hook-formreact-query

The Firefox form is experiencing issues when the cursor is set to 'move'

I have an HTML form with a specific code snippet: #stoppage_section .stoppage{ cursor: move; /* fallback if grab cursor is unsupported */ cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } <div id="st ...

javascriptjqueryhtmlcss

Choosing an ID along with a numerical value in jQuery

Being new to both stackoverflow and jQuery, I'm facing a challenge in creating a basic function. In my website, there are multiple links with IDs such as "filtro1", "filtro2", and so on. My goal is to write a single piece of code that will be trigger ...

javascriptjquerystringjquery-selectors

The command 'var' is not recognized as an internal or external command within npm

I need assistance with installing the histogramjs package. The command npm i histogramjs successfully installs it, but when I attempt to run the code using var hist = require('histogramjs'), I encounter an error in the command prompt: 'var& ...

javascriptnode.jsnpm