Resolve Bootstrap columns with varying heights

My Bootstrap row contains a variable number of columns determined by a CMS, sometimes exceeding the space available on one line.

I am looking for a way to neatly display all the columns with equal heights.

<div class='row'>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
</div>

Although I have found some solutions for making columns equal in height, they do not work when the columns exceed 100% of the row width.

jquerycsstwitter-bootstrapresponsive-design

Answer №1

To ensure correct alignment, consider removing the floats instead of making the heights the same.

<div class='row panel-wrapper'>

For CSS:

.panel-wrapper > .col-lg-2{
    float: none;
    display: inline-block;
}

You can easily find a script to loop through elements with a common class and set equal heights.

Answer №2

For optimal height alignment in your designs, consider utilizing a jQuery plugin such as:

https://github.com/liabru/jquery-match-height

This tool will automatically calculate and set the correct heights for elements on your webpage.

Answer №3

If Bootstrap is setting widths using the applied class, consider removing it or resetting it.

Utilizing CSS tables can be a solution.

By doing this, all columns will have uniform height and width. Additionally, they will automatically adjust their widths to fill the container row.

.myrow {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.mycol {
    display: table-cell;
}


.mycol {
  height: 50px;
  border: 1px solid grey;
}
.myrow {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.mycol {
  display: table-cell;
}
<div class='myrow'>
  <div class="mycol"></div>
  <div class="mycol"></div>
  <div class="mycol"></div>
  <div class="mycol"></div>
  <div class="mycol"></div>
  <div class="mycol"></div>
  <div class="mycol"></div>
  <div class="mycol"></div>
  <div class="mycol"></div>
  <div class="mycol"></div>
  <div class="mycol"></div>
</div>

<div class='myrow'>
  <div class="mycol"></div>
  <div class="mycol"></div>
  <div class="mycol"></div>
  <div class="mycol"></div>
  <div class="mycol"></div>
</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

Deactivate the AJAX button after the specified number of clicks

Imagine I have a model called Post, and it can be associated with up to n Comments (where the number is determined by the backend). Now, let's say I have a view that allows users to add a Comment through an AJAX request. What would be the most effecti ...

javascriptjqueryajax

The initial AJAX GET request is successful, however subsequent clicks do not trigger the call

I have been encountering an issue with my JavaScript where an Ajax call that used to work perfectly fine suddenly stopped working. I have not made any changes to the code that could cause this problem, but something is definitely going wrong. The Ajax call ...

javascriptjqueryajaxasp.net-mvc

How can I align Javascript output vertically in the middle?

I am currently facing an issue with a JavaScript clock displaying in a narrow frame: <!DOCTYPE html> <HTML> <HEAD> <TITLE>Untitled</TITLE> <SCRIPT> function checkTime(i) { if (i < 10) { ...

javascripthtmlcssvertical-alignment

How to position a <div> in the center of a popup <div>

I've encountered a problem trying to center a <div> within another <div> that pops up when a button is clicked. It's not my code, but it's similar. Here is the HTML: <div class="popup"> <div class="options"> ...

htmlcss

Backstretch.js experiencing issues with element functionality, but functioning correctly with body element

I'm having trouble getting backstretch to work on a div. It works perfectly when applied to the body with no errors, but when I try to apply it to a <div>, I get this error: Uncaught TypeError: Object [object Object] has no method 'backs ...

jqueryjquery-backstretch

Do you know of any helpful resources for learning JSON with PHP through video tutorials?

I've been browsing the internet trying to learn about JSON, but a lot of tutorials are just too complicated for me. I'm specifically interested in learning how to use JSON with jQuery and PHP. If anyone has any recommendations for videos or websi ...

phpjqueryjson

Why is it so difficult for me to move it to the next line?

p { font-size: 150%; } body { background-image: url("images/gg.jpg"); background-repeat: repeat; } .rTable { display: block; margin-top: 100px; margin-bottom: 200px; margin-right: 200px; margin-left: 450px; } .rTableHeading, .rTableBody, ...

htmlcss

Symfony: Implementing real-time updating of values through ajax requests

My goal is to update the values of a table using Ajax in Symfony. The operation involves clicking on an update button, which retrieves the ID of the selected row and the new value of the updated attribute. Here is my Twig file: <tbody> {% for ...

jqueryjsonajaxsymfony

Display a specific paragraph inside a div using jQuery

I am having trouble getting my jQuery code to display a specific paragraph when a particular div is clicked on. My goal is for the content "v" to be displayed if the user clicks on the ".Virus" div, and for the contents of ".screenInfo" to be shown if the ...

javascriptjqueryhtmlcssfunction

Guide on embedding PHP code into a HTML div element using JQuery

I am having trouble loading PHP code into a div tag to display the results. The code I have listed below does not seem to work for me. If anyone can offer assistance in resolving this issue, I would greatly appreciate it. Here is the code snippet: <h ...

javascriptphpjqueryhtml

Having trouble populating and submitting a selected option from a dropdown menu in Angular?

Upon loading the page, the Category dropdown automatically populates with data from the database. However, when I attempt to select a value from the dropdown and click a button to post the data to a specified URL, an error occurs: ERROR Error: Error tryin ...

javascripthtmlangulartwitter-bootstrap

Issue with background image repeating incorrectly when resizing

I've recently added an image as the background for my website using the following style: #whole_wrapper{ background-image: url(../images/wrapper_bg.jpg); background-repeat: repeat-x; width: 100%; float: left; height: 116px; } ...

htmlcss

In JavaScript, using window["functionName"](arguments) will result in a TypeError message saying that the function does not exist

When trying to execute an AJAX function based on the active tab in my application, everything works smoothly when I trigger the function after specific events. However, I encounter difficulties when attempting to call the function using a dynamically gener ...

javascriptjqueryajaxeval

Concealing a button within a specific interface

I am currently facing an issue with a data table that includes two control buttons: edit and save. My problem lies in hiding the save button on the initial preview. Basically, what I want to achieve is displaying only the Edit button on the first page. Wh ...

javascriptjqueryhtmlajax

Blurring of text that occurs after resizing in CSS

When I use scale transform to zoom a div in HTML, the text inside becomes blurred. Is there a solution to make the text clear like the original? @keyframes scaleText { from { transform: scale(0.5, 0.5); } to { transform: scale(2, 2); } } ...

htmlcss

Dart and external CSS and JS libraries and tools

As I prepare to dive into developing my very first web application, one technology that has caught my eye is Google Dart. The idea of using a new, innovative approach to web development excites me, and I am seriously considering utilizing it for my project ...

javascriptcssweb-applicationsdart

"Implementing a column template in jqgrid post-creation: A step-by-step

Can't apply column template with Free jqgrid once it's been created. I've attempted: var newOrderPriceTemplate = { align: "center", formatter: "showlink", formatoptions: { onClick: function() { alert('clicked&apos ...

javascriptjqueryasp.net-mvc-4jqgridfree-jqgrid

How to create a CSS animation that gradually darkens a background image during a

Currently in the process of constructing a page with an intriguing background image: body { background:url(images/bg.png) center center no-repeat fixed; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; ...

javascriptjquerycsscss-animations

How can I restrict website access to only specific IP addresses?

I am looking to restrict access to certain IP addresses on a website, but the issue is that dynamic IPs keep changing based on the source of internet connection. Is there a method to determine the static IP of the computer rather than relying on the dyna ...

javascriptjquerybrowsercross-browserip

jQuery can be used to relocate buttons on a webpage

When the Contact button is clicked, how can I move the Close button below #panel? It's currently fixed in position. Here's my demonstration: https://jsfiddle.net/25u78gff/ https://i.sstatic.net/qDad9.png jQuery('.sub-menu').addClass( ...

javascriptjqueryhtmlcss