Uniform height across certain thumbnail images

I have hit a roadblock while working on a project, and I am unable to resolve it :) I am using the Bootstrap grid system and I want to display thumbnails within a content section, with six thumbnails per row. The issue is that while the text below each image varies, I want every thumbnail to have the same height (the highest one) and align the text vertically within the div. Can anyone provide some assistance? 

  <div class="row">
        <div class="col-md-12 col-xs-12" >
            <div class="panel panel-default">
                <div class="panel-heading clearfix">
                    <i class="icon-book"></i>
                    <h3 class="panel-title">Facultati</h3>
                </div>                  
                <div id="main-panel" class="panel-body">
                    <div class="row gallery">
                        <div class="col-md-2 col-sm-2 col-xs-6">
                            <a href="faculty-page.html">
                                <div class="thumbnail">
                                    <img style="height:100px" src="img/faculty.jpg" alt="Cloud Admin" class="img-responsive">
                                    <div class="caption">
                                        <h3 style="text-align:center;font-size:20px">Facultatea de Matematica si Informatica</h3>
                                    </div>
                                </div>
                            </a>
                        </div>

                        <div class="col-md-2 col-sm-2 col-xs-6">
                            <a href="faculty-page.html">
                                <div class="thumbnail" >
                                    <img style="height:100px" src="img/faculty.jpg" alt="Examene" class="img-responsive">
                                    <div class="caption">
                                        <h3 style="text-align:center">Examene</h3>
                                    </div>
                                </div>
                            </a>
                        </div>

                        <div class="col-md-2 col-sm-2 col-xs-6">
                            <a href="faculty-page.html">
                                <div class="thumbnail">
                                    <img style="height:100px" src="img/faculty.jpg" alt="Cloud Admin" class="img-responsive">
                                    <div class="caption">
                                        <h3 style="text-align:center">Lab1.doc</h3>
                                    </div>
                                </div>
                            </a>
                        </div>

                        <div class="col-md-2 col-sm-2 col-xs-6">
                            <a href="faculty-page.html">
                                <div class="thumbnail">
                                    <img style="height:100px" src="img/faculty.jpg" alt="Cloud Admin" class="img-responsive">
                                    <div class="caption">
                                        <h3 style="text-align:center">Facultatea de Geografie</h3>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Here's the HTML

.caption{
display:table;
height:auto;}


.caption h3{
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
 }

and here the CSS (just for this part) Thank you.

csshtmlheightmultiple-columns

Answer №1

Implementing this purely with CSS is a real challenge and may require some creative workarounds. An alternative approach would be to use JavaScript to calculate the maximum height of the thumbnails and then set all of them to that value.

I wrote a function a few months back (in jQuery, but easily convertible to plain JavaScript) that achieves this:

function adjustHeight(elements){
    var currentHeight = 0, maxHeight = 0;

    $(elements).each(function(){
        currentHeight = $(this).height();
        maxHeight = Math.max(currentHeight, maxHeight);
    });
    $(elements).height(maxHeight);
}

adjustHeight("thumbnail");

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

Displaying a single row of a PHP array in bold formatting

I have a MySQL query result showing user information and subjects they have chosen. I want to highlight one specific row by making it bold using PHP while keeping the rest as regular text. How can I achieve this? $resultSet = $db->query ("...my q ...

phphtmlarrays

The method of utilizing React with Redux to display component properties

I am currently trying to include my common component in my main.js file Successfully implemented this However, when attempting to print my Redux data values in the common component, I created a method called handleClickForRedux to handle this task. Even af ...

javascripthtmlcssreactjsredux

Ensure the left and right screen widgets remain fixed in their positions as the user scrolls down the page using the spacebar

Currently, I have a webpage that showcases products with a large height attribute. I am looking for a way to make the page scroll down when the user hits the space bar to view more products. However, I want my screen widgets such as the shopping cart and ...

javascriptcsspositioning

How can I populate a select dropdown list in Django using JsonResponse?

I've been working on displaying a list from my Django application in an HTML select option, but I'm having trouble getting it to show up. Also, I believe I need to assign IDs to the option values in the select list, but I'm not sure where to ...

pythonhtmldjangoajax

Ensure that the control button is pressed during the JavaScript onclick event function

I am looking to create a JavaScript function that checks if the CTRL button is pressed. Here is my PHP code: <tr class="clickable" onclick="gotolink('<?= base_url() . invoices/createinvoice/' . $customer->Id; ?>')"> And here ...

javascriptphphtmlfunction

Adjustable height for the absolute element

Having a bit of an issue with the height of the absolute div. About: .wrapper - I want the wrapper to automatically adjust its height but be limited by a max-height. (No scrolling for the wrapper) .title - Just a title .content - The problem aris ...

htmlcss

Using `href="#"` may not function as expected when it is generated by a PHP AJAX function

I am facing an issue with loading html content into a div after the page has loaded using an ajax call. The setup involves a php function fetching data from the database and echoing it as html code to be placed inside the specified div. Here is my current ...

javascriptphphtmlajax

Disappearances of sliding jQuery divs

I am currently working on a website using jQuery, and I have implemented a slide in and out div to display share buttons. The issue I am facing is that the code works perfectly on the first page, but on every other page, the div slides out momentarily and ...

javascriptjqueryhtmlcss

Generate a new column in pandas by extracting the ending characters of strings with varying lengths

Dataframe description total average number 0 NFL football (white) L 49693 66 1007 1 NFL football (white) XL 79682 74 1198 2 NFL football (white) XS 84943 81 3792 3 NFL football (wh ...

pythonpandasstringmultiple-columns

Update the formatting of the dates in the dateRangePicker

Utilizing a dateRangePicker, I am receiving dates in the format "mm-dd-yyyy". Below is my HTML code: <input type="text" name="TextDate" value="10/24/1984" /> Here is the script being used: <script> $(function() { $(&apos ...

javascriptjqueryhtmljquery-uidaterangepicker

I have noticed that the share buttons on Sharethis.com only show up after I resize the viewport

After integrating share buttons from Sharethis.com, I noticed that they do not appear when the page is refreshed. However, when I resize the viewport, they suddenly show up. <!DOCTYPE html> <html lang="en"> <head> <script t ...

htmlbuttonsharebootstrap-5

Angular date control and its corresponding date panel are not properly aligned on the user interface

I am utilizing Angular and Angular Material for date control display. See the code snippet below: <input type="date" (change)="validateDateRange($event,true, index)" class="form-control oot-start-date align-middle" name=& ...

cssangularangular-material

Troubleshooting material design CSS problem in AngularJS routing module

Attempting to incorporate material design with routing in angular js, but encountering issues with CSS design not working. Interestingly, when using bootstrap CSS, it functions properly. Check out the Plnker Demo here However, upon trying this approach, ...

cssangularjsangularjs-routingangular-material

Find the nearest class name in proximity

I am attempting to find the closest anchor element with a class that has been clicked. However, not all links will have a class assigned to them, so I need to consider the parent class as well. Since the class names will vary, hardcoding specific class nam ...

jqueryhtml

Ways to conclude a running function

This script has been created by me: $(document).ready(function(){ $("div#tabs a").hover(function(){ rod = this.id $('div.tabber').hide(); $('#tabber_' + rod).fadeIn(); $("div#tabs a").removeClass("ta ...

jqueryhtmlmenutabsfadein

Navigate through FAQ items with sliders using Owl Carousel 2 - Easily switch between different chapters

Exploring the creation of a FAQ section with individual carousels for each item. My primary objective is for the carousel to transition to the next chapter when advancing beyond the last slide (backwards navigation would be a future enhancement). I'v ...

javascripthtmljquerycssowl-carousel-2

Utilize React Native to showcase JSON data in a visually appealing way by organizing it into titles and corresponding lists for both

I created a live code on Expo.io to showcase JSON data categories as titles and the subs as a list. This code utilizes .map() to retrieve data from an array. import React, { useState } from 'react'; import { Text, View, StyleSheet, Button, FlatLi ...

javascripthtmljsonreact-native

The issue arises when trying to use ::v-deep in conjunction with v-dialog's content-class when using scoped scss

I've been working on styling the content of the Vuetify dialog component and have been using the content-class prop along with scoped styles to achieve this. Can someone explain the difference between the styles provided below? And also, any tips on h ...

cssvue.jsvuejs2vuetify.js

Setting a default value dynamically in a `select` control can be done by using JavaScript to

Upon subscribing to the HTTP server for data retrieval, my select control in Angular framework gets loaded with the received data. My objective is to set a default value that comprises three values from the server object separated by slashes ("/"), which r ...

htmlangulartypescripthtml-selectangular-reactive-forms

Prevent users from copying and pasting text or right-clicking on the website

I have been struggling to completely disable the ability for users to copy and paste or select text on my website across all devices. After much searching, I came across a solution that I implemented on my site. Below the <body> tag, I inserted the ...

javascripthtmlcss