Achieving equal height divs using Bootstrap

I have a row of 8 divs arranged horizontally, and I am looking to make them all the same height. Right now, their heights vary based on the content inside each one. Can someone offer some assistance? I've attempted multiple solutions without success so far. Unfortunately, using Bootstrap 3 means flex is not an option :(

<div class="container" style="width:100%">
<div class="col-xs-6">
    <div class="row ">
        <div class="col-xs-3 clickable">
            <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align: center">Pending DTO</div>
                </div>   
            </div>
        </div>
        <div class="col-xs-3 clickable">
            <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align: center">Pending Offer</div>
                </div>
            </div>
        </div>
        <div class="col-xs-3 clickable">
            <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align: center">Pending Budget Approval</div>
                </div>
            </div>
        </div>
        <div class="col-xs-3 clickable">
            <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align: center">Pending Technical Analysis</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-xs-6" style="height:100%">
    <div class="row ">
        <div class="col-xs-3 clickable">
            <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align: center">Pending Information</div>
                </div>
            </div>
        </div>
        <div class="col-xs-3 clickable">
            <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align: center">Pending Provisioning</div>
                </div>
            </div>
        </div>
        <div class="col-xs-3 clickable">
            <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align: center">Pending in progress</div>
                </div>
            </div>
        </div>
        <div class="col-xs-3 clickable">
            <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align: center">Provisioned</div>
                </div>
            </div>
        </div>
    </div>
</div>

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

htmlcsstwitter-bootstrap

Answer №1

My go-to framework for this project was Bootstrap 3, and it worked wonders!

<!-- Include the latest compiled and minified CSS from CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- Add jQuery library hosted on Google CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Include the latest compiled JavaScript from CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.equal, .equal > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 1 auto;
}
</style>
</head>
<body>


<div class="container-fluid">
  <div class="row equal">
    <!-- Start of panel 1 -->
    <div class="col-md-4">
      <div style="text-align:center" class="panel panel-primary">
        <div class="panel-heading">
          <h1 class="panel-title text-center">Pending DTO</h1>
        </div>
        <div class="panel-body">
          
          <p class="text-left lead2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text ever since the 1500s.</p>
         
        </div>
        
      </div>
      
    </div>
    
    <div class="col-md-4">
      <div style="text-align:center" class="panel panel-primary">
        <div class="panel-heading">
          <h1 class="panel-title">Social Media Management</h1>
        </div>
        <div class="panel-body">
         
          <p class="text-left lead2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
         
        </div>
        
      </div>
      
    </div>
    
    <div class="col-md-4">
      <div style="text-align:center" class="panel panel-primary">
        <div class="panel-heading">
          <h1 class="panel-title">Test</h1>
        </div>
        <div class="panel-body">
          <p> test
            
          </p>
         
        </div>
        
      </div>
      
    </div>
   
  </div>
</div>

</body>
</html>

Answer №2

In order to ensure each row has 12 columns, be sure not to nest rows within each other:

<div class="container" style="width:100%">
  <div class="row">

    <div class="col-xs-3 clickable">
      <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
        <div class="panel panel-default">
          <div class="panel-heading" style="text-align: center">Text example Text example Text example</div>
        </div>
      </div>
    </div>

    <div class="col-xs-3 clickable">
      <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
        <div class="panel panel-default">
          <div class="panel-heading" style="text-align: center">Text example Text example Text example</div>
        </div>
      </div>
    </div>

    <div class="col-xs-3 clickable">
      <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
        <div class="panel panel-default">
          <div class="panel-heading" style="text-align: center">Text example Text example Text example</div>
        </div>
      </div>
    </div>

    <div class="col-xs-3 clickable">
      <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
        <div class="panel panel-default">
          <div class="panel-heading" style="text-align: center">Text example Text example Text example</div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">

    <div class="col-xs-3 clickable">
      <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
        <div class="panel panel-default">
          <div class="panel-heading" style="text-align: center">Text example Text example Text example</div>
        </div>
      </div>
    </div>

    <div class="col-xs-3 clickable">
      <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
        <div class="panel panel-default">
          <div class="panel-heading" style="text-align: center">Text example Text example Text example</div>
        </div>
      </div>
    </div>

    <div class="col-xs-3 clickable">
      <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
        <div class="panel panel-default">
          <div class="panel-heading" style="text-align: center">Text example Text example Text example</div>
        </div>
      </div>
    </div>

    <div class="col-xs-3 clickable">
      <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
        <div class="panel panel-default">
          <div class="panel-heading" style="text-align: center">Text example Text example Text example</div>
        </div>
      </div>
    </div>
  </div>

https://jsfiddle.net/he6na89r/

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

Implementing a button row and content alignment next to an image using Bootstrap or CSS

Ensure that the product detail page features a row with labels and buttons, positioned to the right of the image within Bootstrap columns. I have utilized Bootstrap 3 for this page layout. However, upon implementation, I encountered an issue whereby the b ...

jqueryhtmlcssasp.nettwitter-bootstrap

The curious case of looping and peculiar Vue actions

I've been working on a project where I am looking to dynamically add more input fields upon clicking a button. My initial attempt using jQuery.append ran into issues with detecting v-model. Switching gears, I decided to try achieving the same outcom ...

javascripthtmlvue.js

(HTML)(PHP)Restricting Access to Login Page

My user page is the only one being accessed for both users and admins. Within my database and table, each are divided by 'type', where 0 represents a user and 1 represents an admin. Here is my code: <?php session_start(); include 'dbcon. ...

phphtmlmysqlweb

Troubleshooting column alignment with Bootstrap4 and Angular: Resolving issues with text alignment on

Being relatively new to Bootstrap 4, as I have only used version 3.3 on my previous project which did not utilize the flexbox grid system. Now that I am embarking on a new project, I find myself facing a challenge: I am struggling to apply the "text-alig ...

htmlangularflexboxbootstrap-4

Issues with jQuery scroll effect not functioning properly in Firefox due to transformation errors

I've encountered an issue with implementing a scroll effect in Firefox. The code works perfectly fine in Chrome, Safari, and Opera, but for some reason, it's not functioning properly in Firefox. I have carefully reviewed the '-moz-transform& ...

javascriptjquerycssfirefoxscroll

How can Selenium click on an <a> element using By.LinkText and bypass any line breaks within the link text?

One a element contains text with \r\n within it. The HTML code is shown below: <a href="/Profile/ProfileView?isSuccessScreen=1&amp;URLID=x/ayvqzf7zojzzqiauihka" class="list green profile "> <img src="/content/css/theme/images/pro ...

c#htmlselenium-webdriver

Using CSS :hover for elements with dual classes only

Is there a way to make the CSS :hover selector work only when two different classes are attached to a div? I have tried a couple of methods, but they eliminate the hover effect. For example: .accordionButton .cyan:hover{ color: cyan; } I cannot s ...

csshover

"Choosing multiple options in Select2 causes it to constrict within a Bootstrap 4 inline

I am facing an issue where the field shrinks drastically when I type in it. Here's a code snippet that showcases this problem: $(function() { $("select").select2({ placeholder: "Select a word", width: "100%" }); }); <link rel ...

htmlcssjquery-select2bootstrap-4jquery-select2-4

Is there a way to continuously click on a button 99 times or until the code finishes running?

Need Assistance, Please Assist. I am encountering an issue where I have the same type of skip button with identical name and id properties for all products, but only the xpath changes. Can you provide guidance on how to efficiently click on 99 similar ski ...

javascripthtmlseleniumtestingselenium-webdriver

Applying Border Radius to JavaFX Components for a Unique Background Effect

When I apply the CSS properties -fx-border-radius and -fx-border-width to a basic GridPane, the background in the corner does not get "cut off". The following is the CSS code being used: .payload { -fx-hgap: 20px; -fx-padding: 40px; -fx-back ...

javacssjavafxgridpane

Fine-tuning the flexbox grid layout for various screen sizes, both big and small

Two different layouts were created. The first layout is designed for medium & large screens, while the second one is tailored for devices with a maximum width of 736px. Check out the vanilla implementation using flexbox (without mobile adaptation) Here ...

htmltwitter-bootstrapcssflexbox

Experience choppy scrolling in Internet Explorer

Check out my click and drag scrolling Image Viewer here. While it functions perfectly in Firefox and Chrome, Internet Explorer is giving me some trouble. The movement seems jerky, especially when scrolling diagonally. It's like the scroll is sluggish ...

javascripthtmlcssinternet-explorer

JQuery displays 'undefined' on checkbox loaded via Ajax

Currently, I am utilizing a checkbox to activate my select Option tag. The select option tag and checkbox are both loaded via ajax. While the select option works perfectly, the checkbox displays as undefined. However, it functions properly in enabling my d ...

javascriptjqueryhtmlajaxcheckbox

The event listener function is not functioning properly on images generated by JavaScript

I'm currently working on placing multiple images on a grid in the center of the page and would like to include a function that triggers when each individual image is clicked. The images are dynamically created using JavaScript and inserted into the do ...

javascripthtmlcss

Can the distinction between a page refresh and closure be identified using the method below?

My idea is to trigger a popup window when the page is closed, not when it is refreshed. The plan is as follows: Client Send an ajax request to the server every x seconds. Server var timeout=0 var sec=0 while (sec>timeout) { open popup win ...

javascripthtmldjangoalgorithmpolling

The Alchemy feature on hover is not functioning

I am currently using alchemy.js to display a graph, but I am encountering issues with showing the "onMouseOver" caption of the graph's node. The console is displaying some errors which you can see here. Here is the code snippet: <html> < ...

javascripthtmljsononmouseoveralchemy

Reviewing user input for any inappropriate characters using jQuery's functionality

When a username is inputted into the input box, I want to make sure that only valid characters are accepted. The following code shows what I have so far; but what should I replace "SOMETHING" with in the regular expression? var numbers = new RegExp( ...

javascriptjqueryhtml

Is it possible to remove htmlescape from the custom options in Magento? Can you specify which file showcases the custom

Looking to incorporate HTML into custom option labels for products on my Magento store. Unfortunately, Magento does not parse HTML by default when it is placed in the custom options interface. I suspect there may be a line like "$this->htmlEscape()" wit ...

phphtmlmagentoe-commerce

Make the text within the CSS style of ".well" wrap around the width

I am looking to style the width of a .well class to be in proportion with the text inside a simple textbox that it contains. What is the best approach to achieve this sizing using CSS? ...

htmlcsstwitter-bootstrap

Centering text in a D3 donut chart

Struggling with centering text inside a d3 donut chart for a project. While trying to modify a piece of code, I find myself lost in the complexity of it. Despite my efforts, the text added to the center is not perfectly centered. I have attempted various ...

javascriptcssd3.jsdonut-chart