The Bootstrap row snag causing text display issues

There seems to be a glitch when the first column has more text than the one next to it. Check out the screenshot provided for reference.

Any suggestions on how to fix this issue in Bootstrap?

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

Live Demo: https://jsfiddle.net/oLderkuo/

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
    
    <div class="portfolio-gallery row">

<div class='gallery-item col-md-4 col-sm-6 col-xs-12'>
<span class='sub-gallery-icon'>
<a href='#' >
<img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" />
</a>
</span>
<span class='wp-caption-text gallery-caption'><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendre...
</span>
</div>

<div class='gallery-item col-md-4 col-sm-6 col-xs-12'>
<span class='sub-gallery-icon'>
<a href='#' >
<img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" />
</a>
</span>
<span class='wp-caption-text gallery-caption'><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</span>
</div>

<div class='gallery-item col-md-4 col-sm-6 col-xs-12'>
<span class='sub-gallery-icon'>
<a href='#' >
<img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" />
</a>
</span>
<span class='wp-caption-text gallery-caption'><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget...
</span>
</div>
    
</div>

htmlcsstwitter-bootstrap

Answer №1

One issue that arises is due to Bootstrap applying a float to the col-* classes, causing display problems with divs. Instead of cluttering the markup with unnecessary divs to clear the float, there's a simple solution.

This code snippet goes through each div, calculates its height, and adjusts the max-height if necessary. By applying this max height to all divs, the problem can be fixed.

It's worth noting that a resize function and console log have been added for demonstration purposes. Due to limitations in the snipp editor, it's advised to copy the code to your own page to see it in action properly. Trust me, it works like a charm!

adjustHeight();
$( window ).resize(function() {
   adjustHeight();
});
function adjustHeight(){
    var maxHeight=0;
    $('.gallery-item').each(function(){
    var height=$(this).height();
    if(height>maxHeight){maxHeight=height};
      console.log(maxHeight);
    });

    $('.gallery-item').css('height',maxHeight+'px');
}
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class="container">
    <div class="portfolio-gallery row">
    
<div class='gallery-item col-md-4 col-sm-6 col-xs-12'>
<span class='sub-gallery-icon'>
<a href='#' >
<img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" />
</a>
</span>
<span class='wp-caption-text gallery-caption'><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum...

Answer №2

I stumbled upon a solution at this GitHub thread

Check out the updated version of my Fiddle here: https://jsfiddle.net/oLderkuo/3/

To solve the issue, I needed to insert the following code after every other gallery item div:

<div class="clearfix visible-xs"></div>
<div class="clearfix visible-sm"></div>

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

how to combine a string in JavaScript using a prefix and suffix

Anion Gap Body Surface Area (BSA) Creatinine Clearance Stack Overflow i want to add "String" Before Text and "String" after end of text. I have Following expression which runs perfectly in excel:- =CONCATENATE("",B1,"") Output:- <string>Anion Ga ...

javascripthtml

Placing options and a clickable element within a collapsible navigation bar

Within my angular project, there are 4 input fields where users need to enter information, along with a button labeled Set All which will populate them. https://i.sstatic.net/1GGh1.png I am wondering how I can organize these input fields and the button i ...

javascripthtmlangulartypescriptbutton

Resize images smoothly without disrupting the anchor scrolling

I have created a website with the following design: (Caution: The site is built using AngularJS on a server that may not serve it correctly - please visit directly instead of using browser reload.) However, I am facing two conflicting requirements... ...

htmlcss

Tips for positioning the Google Custom Search bar

I am looking to position the Google custom search box on the left side of my website. Currently, I am using a website builder called imxprs and have implemented this code for my custom search box. <script> (function() { var cx = '013012 ...

javascripthtmlcssuisearchbargoogle-custom-search

How to Include HttpClient in an Angular Service

Looking for a service that utilizes http requests? import { Injectable } from '@angular/core'; import { Observable, of } from 'rxjs'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root&a ...

htmlangularangularjstypescript

Assign a class while directing visitors away from a particular webpage

Can a div have a class added on page load, but only when redirected from a specific link or page? I currently have an <a href="marketing.php" id="openMyMaterialTab"><button class="secondaryAction">See all</button></a> link on my la ...

phpjqueryhtmlurlhttp-redirect

Is there a way to display the month values in my dropdown menu using the date format of yyyy-mm-dd?

This is the code snippet I am working with: <form> <table> <tr> <td>Month</td> <td> <select name=""> <option value="">January</optio ...

javahtmljspsimpledateformat

Tips on leveraging state values within the makeStyles function in Material UI React

I'm in the process of building a Webpage and incorporating Material UI for the Components. Here's the code: import { makeStyles, Typography } from "@material-ui/core"; const useStyles = makeStyles((theme) => ({ container: { ...

javascripthtmlreactjsreact-nativematerial-ui

What steps can I take to add a horizontal scroll bar and view the entirety of my image?

<img src="the fake.png" width="3268" height="538" class="table" alt=""/> I have a large image that is getting cut off on the page. I need to add a horizontal scrollbar so I can view the entire image ...

phphtmlcssweb

Is it possible to rearrange an array by moving an element to the front

If I have an array as shown below, how can I move key [2] and its corresponding value to the front of the array? This would make it key [0] and increment the other keys by 1. Current: [0] => Array ( [name] => Vanilla Coke cans 355ml x 2 ...

phphtmlarrays

BS grid malfunctioning in a non-uniform manner

When a division in the advantage grid is clicked, the card body of another division collapses. However, this does not occur in the disadvantage grid. Clicking on one section in the disadvantage grid does not collapse another section as it does in the advan ...

htmlcsstwitter-bootstrap-3frontendtwitter-bootstrap-4-beta

Is there a way to determine if a line has been automatically wrapped within a textarea element?

Is it possible to detect when text is wrapped onto the next line in a textarea after becoming wider than the area? ...

javascriptjqueryhtml

Enable the Angular button only when the radio button has been selected

Just starting out with Angular and I have a query. This is a scenario for my project at work. https://i.stack.imgur.com/R3SxA.png In this screenshot, I want to enable the "ajouter" button when at least one radio button is selected in the secure chest (s ...

htmlangulartypescript

Selecting specific elements based on their position within a parent element using

I can't seem to figure out the strange behavior of the nth-child selector. After calling the function BackColor1(), my visual appears different than expected: Something seems off. However, when I call BackColor2(), everything looks normal again. Co ...

jquerycss

In Angular 16, allow only the row that corresponds to the clicked EDIT button to remain enabled, while disabling

Exploring Angular and seeking guidance on a specific task. I currently have a table structured like this: https://i.stack.imgur.com/0u5GX.png This code is used to populate the table: <tbody> <tr *ngFor="let cus of customers;" [ngClass ...

htmlangulartypescript

Chrome introduces surprise spacing to text input fields styled uniquely

This particular code snippet is functioning correctly on Firefox, but unfortunately not on Chrome. The height of the input should match the styling of the select, but there seems to be a discrepancy in Chrome. Any ideas on how to rectify this? Upon closer ...

htmltwitter-bootstrapcssbootstrap-4

Understanding JavaScript for Reading a Website's "Local Storage"

Can the local storage of one website be accessed by a different domain, or is it restricted to only the domain that saved it? ...

javascriptphphtmlcssjson

What is the best method for creating a header design in CSS?

My website code is pretty standard <div class="header"></div> <div class="site-inner"></div> <div class="footer"></div> How can I achieve a header background like the one shown in the image? Do I need to set the entire ...

htmlcssheaderfrontendabsolutelayout

Creating a dynamic carousel with adjustable images

My image carousel is giving me trouble with responsiveness, specifically the height of the images. While the width looks okay, the height is only half of what I need. Can someone offer some ideas on how to make my image height 100% responsive? I've tr ...

htmlcsstwitter-bootstrap

When the text overflows the boundaries of a paragraph in CSS HTML

I am facing an issue with text overflowing in a paragraph <p style="width:200px;">Text goes here</p> As the text in the paragraph increases in width, it does not automatically wrap to a new line, causing it to overflow outside the paragraph ...

htmlcss