Bootstrap grid for thumbnails

I am attempting to create a responsive grid with thumbnails using Bootstrap and Knockout. Here is the current HTML code:

<div class="row">
    <!-- ko if: toys().length == 0 -->
    <div>No toys in category</div>
    <!-- /ko -->
    <!-- ko foreach: toys-->
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 previewGridItem">
        <a class="thumbnail" data-bind="attr: { href: '#!/toy/' + id }">
            <img data-bind="attr: {src: images[0] ? images[0] : '/Content/img/NoImage.jpg' }" />
            <span data-bind="text: name"></span>
        </a>
    </div>
    <!-- /ko -->
</div>

While I do manage to get the grid looking correct at times, more often than not (depending on image sizes and lengths of item names) it ends up looking like this: https://i.sstatic.net/lfNta.jpg.

How can I properly align these items? One simple solution would be to set a fixed height for the images, but that distorts their proportions. Additionally, I would like the images to resize proportionally with height adjustment, while restricting text to only two lines per image.

You can view a live demo here.

Answer №1

One solution to consider is the Gridalicious plugin, specifically designed for situations like this. Not only is it efficient in terms of speed, but it also offers flexibility through customizable parameters and the option to edit the uncompressed version to fit your specific requirements.

Learn more about Gridalicious here

Answer №2

After facing the issue, I managed to resolve it by utilizing a jQuery plugin recommended in Artanis' comment. Additionally, I needed to incorporate the imagesLoaded plugin due to an ajax call loading images. Consequently, the following code was implemented:

window.imagesLoaded(".previewGridItem", function(instance) {
    $(".previewGridItem").matchHeight();
});

While this current approach may not be optimal, as it introduces additional libraries of 40kb (minimized to 12Kb), solely for image alignment purposes, I have yet to discover a purely CSS-based solution.

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

Creating a dynamic search feature that displays results from an SQL database with a dropdown box

Is there a way to create a search bar similar to those seen on popular websites like YouTube, where the search results overlay the rest of the page without displacing any content? I've searched extensively on Google and YouTube for tutorials on databa ...

In JavaFX, when adjusting the transparency of a popup window, only the brightness changes while the solid color remains unchanged, effectively concealing

Is it possible to have a transparent popup window (errorDialog.fxml) on top of the main window (mainWindow.fxml) with 50% opacity while still showing the content of the main window underneath? My attempts at setting the background color of the overlay insi ...

The submit button remains unresponsive, yet upon removing its JavaScript code, it functions smoothly

This is the content of my index.html file. It contains JavaScript code. However, there seems to be a problem with the JavaScript validation as the Submit button does not perform any action when clicked. Surprisingly, when I remove the JavaScript code, the ...

Submit data from one form to another form located within an iframe

I am currently using a JX Browser that allows content to be displayed in an iframe. My goal is to automatically transfer the username and password of a user logging into my ticketing software to another form within an iframe. The page within the iframe is ...

Unable to enclose an element with an HTML structure

I am attempting to take all the elements marked with the table tag and envelop them in an HTML structure to make the tables responsive. However, it appears that my current approach is not yielding the desired results. Can you please provide some insight ...

Is there a way to slow down the falling effect on my navigation bar?

As I was working on my personal website, I had a creative idea to add a falling-down animated effect instead of keeping the layout fixed. Utilizing bootstrap for navigation, I encountered some difficulty in controlling the speed of the falling effect. Any ...

Did I incorrectly associate the function with the button causing it to always be executed?

I am working on a PHP page, where I have some initial content followed by session initialization code: <?php session_start(); ?> The requirement is to display a disconnect button only if the user is logged in, indicated by the presence of $_SESS ...

Learn the process of dynamically adding new rows and assigning a distinct ng-model to each row

Does anyone know how to create a dynamic table in HTML with unique ng-models for each cell? I've tried the following code, but I'm struggling to figure out how to add ng-model. <!DOCTYPE html> <html> <head> <style> table, ...

Concealing the resize handle icon using CSS

Consider a scenario where there is a table structure: <table> <tr> <th><div>Title1</div></th> <th><div>Title2</div></th> </tr> <tr> <td>< ...

Creating visualizations by overlaying shapes onto images using specified coordinates in jQuery

I have a web application in development that integrates with the skybiometry API. Their demo showcases a fantastic user feedback system displayed after facial recognition, similar to the one shown below. I am currently working on implementing a similar fe ...

What is the best way to align elements in relation to a central div container?

Is there a way to align two buttons in the center on the same line, and then position a selector to the right of those centered buttons? How can I achieve this arrangement? Essentially, how do you position an element in relation to a centered div? UPDATE: ...

"Crafting sleek and polished titles using HTML and CSS - A step-by-step guide

I've noticed an increasing number of websites that feature incredibly slick headlines, such as the ones on this site: How do these websites achieve this effect? Are there any subtle hints to look out for? I once heard about a technique involving Fla ...

Is it possible for a memory leak to occur when a jQuery object is created within a function but never actually used?

As an illustration: function calculateTime(minutes) { var newTime = new Date(); newTime.setHours(0, minutes, 0, 0); return angular.element('<input type="hidden"/>').timepicker('setTime', newTime).val(); } I'm cu ...

The parameter type 'Event' cannot be assigned to the argument type

edit-category-component.html: <custom-form-category *ngIf="model" [model]="model" (onSaveChanges)="handleChanges($event)"></custom-form-category> <mat-loader *ngIf="!model"></mat-loader> edi ...

Designing a Scrollable tbody Element while Preserving the Integrity of the tbody Columns

Currently, I am attempting to implement a scrollable tbody in order to run a React package smoothly. The challenge lies in achieving a scrollable tbody without having to resort to using display: block on the tbody element. Unfortunately, this solution dis ...

Step-by-step Guide on Making a Dropdown List with Options Featuring Background Images and Text

Hello, I am working on creating a customized dropdown list similar to the one shown in the image. https://i.sstatic.net/saeCd.png My goal is to have a select list with options that display both an image and the country name. However, my current code is n ...

Can someone help me locate the file using the inspect element feature?

Today, I encountered a small issue on my website that I wanted to fix. Although I was able to make the necessary changes using Inspect Element, I couldn't locate the file where it needed to be changed. The website in question is gesher-jds.org/giving. ...

Activate an iframe upon changing the media query

I am currently working on a webpage where I have included an image within an iframe. I am looking to change the content displayed inside the iframe based on different media query breakpoints. For instance, if the viewport has a minimum width of 900px, I ...

Glitchy/Crazy CSS3 Animations

Currently, I am developing a website at . One of the features I have implemented is CSS3 transitions for route changes, but this feature only works in Chrome. Here's how the animation works: I apply the .preanimate class to rotate the phasing out di ...

Difficulty with selecting the nth-child element within an Ember application

In my current project using Ember, I am faced with the challenge of targeting nth-child elements with CSS due to the presence of Ember script tags. Is there a consistent method to achieve this in an Ember application? Instead of the conventional approach: ...