"Create a dynamic box grid with varying heights using the responsive design features of Bootstrap

I have been attempting to create a responsive grid consisting of 6 textboxes using the box class and bootstrap.

My issue is that due to varying amounts of text in each textbox, they end up with different widths/heights. However, I want them all to have the same max-height/max-width as the box containing the most text.

Is there a way to achieve this without manually setting the width/height for each individual textbox?

Below is a snippet of the code:

/***** Box *****/

.flex-box {
  position: relative;
  text-align: center;
  margin-top: 10px;
  margin-right: auto;
  margin-bottom: ;
  margin-left: auto;
  padding: 40px;
  transition: all 0.3s ease;
  background-color: rgb(170, 230, 255);
}

.flex-box:hover {
  margin-top: 5px;
  margin-bottom: 5px;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}
<!-- Textbox-Sections -->
<section id="about_me" class="section-padding title">
  <div class="container-fluid">
    <div class="container pt-4">
      <h1 class="title">About me</h1>
      <div class="row">
        <div class="col col-12 col-sm-6 col-lg-4">
          <div class="flex-box">
            <h1 class="boxtitle">My way</h1>
            <p class="lead">
              <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti fuga iusto aspernatur magni rem quas deserunt repellendus hic fugit amet tempora labore perferendis, voluptate possimus itaque cum molestias dolores. Omnis?</div>
            </p>
          </div>
        </div>
        <div class="col col-12 col-sm-6 col-lg-4">
          <div class="flex-box">
            <h1 class="boxtitle">My way</h1>
            <p class="lead">
              <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse voluptatum soluta cum provident explicabo fugiat dolores odit blanditiis dolorem magni. Quaerat temporibus doloremque beatae voluptatum dignissimos? Eligendi voluptatum similique
                incidunt!
              </div>
            </p>
          </div>
        </div>
        <div class="col col-12 col-sm-6 col-lg-4">
          <div class="flex-box">
            <h1 class="boxtitle">My way</h1>
            <p class="lead">
              <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate ipsam neque recusandae similique. Inventore repellendus aliquid delectus explicabo dolore sapiente voluptas nihil dolorem tempore voluptates, nemo ipsum cumque animi quidem.</div>
            </p>
          </div>
        </div>

        <div class="col col-12 col-sm-6 col-lg-4">
          <div class="flex-box">
            <h1 class="boxtitle">My way</h1>
            <p class="lead">
              <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod illo incidunt nihil praesentium minus itaque hic, soluta dicta cupiditate quos dolorum esse, harum placeat, qui veritatis animi sunt? Ab, nobis.</div>
            </p>
          </div>
        </div>
        <div class="col col-12 col-sm-6 col-lg-4">
          <div class="flex-box">
            <h1 class="boxtitle">My way</h1>
            <p class="lead">
              <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, fuga vel. Maxime hic tempore quo animi ex vero doloribus dolores quos, sapiente delectus dolor et laborum amet quam aspernatur earum.</div>
            </p>
          </div>
        </div>
        <div class="col col-12 col-sm-6 col-lg-4">
          <div class="flex-box">
            <h1 class="boxtitle">My way</h1>
            <p class="lead">
              <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta, repellendus distinctio ratione autem consequatur rerum libero nesciunt ullam eaque molestias odit architecto nisi incidunt quasi omnis ut. Natus, exercitationem alias.</div>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Here's a link to the CodePen site

Many thanks

csshtmltwitter-bootstrapbootstrap-4

Answer №1

Ensure that the height of .flex-box is set to 100% to fully occupy the space within the col-*...

https://codepen.io/anon/pen/GQORQV?editors=1100

.flex-box {
  position: relative;
  text-align: center;
  margin-top: 10px;
  margin-right: auto;
  margin-bottom:;
  margin-left: auto;
  padding: 40px;
  height: 100%;
  transition: all 0.3s ease;
  background-color: rgb(170, 230, 255);
}

Answer №2

It may not be achievable with CSS alone, but if you're stacking these boxes vertically instead of horizontally, then it's definitely possible. Achieving the same height in a grid layout is also feasible if the sections are aligned one on top of the other as shown in this image -- https://i.sstatic.net/lCnTs.png

Answer №3

According to @Abhijeet, if the boxes are aligned horizontally, you can utilize CSS. Alternatively, here is a jQuery snippet that can be used:

var max_height = 0;
var max_width = 0;
$('.equal-size').each(function(e) {
  h = $(this).height();
  if(typeof(h) != "undefined") {
   if(h > max_height) {
     max_height = h;
   }
  }
  w = $(this).width();
  if(typeof(w) != "undefined") {
   if(w > max_width) {
     max_width = w;
   }
  }
});
if(max_height > 0) {
  $('.equal-size').height(max_height);
}
if(max_width > 0) {
  $('.equal-size').width(max_width);
}

Ensure that the elements have the class equal-size.

The script calculates the maximum height/width and applies it to each element.

If there are multiple groups of elements that require equal height/width, assign group numbers and adjust classes accordingly (e.g., equal-size-1, equal-size-2, ...) and use this modified snippet:

var numberOfGroups = 2;
for(var i=1; i<numberOfGroups+1; i++) {
    var max_height = 0;
    var max_width = 0;
    $('.equal-size-'+String(i)).each(function(e) {
      h = $(this).height();
      if(typeof(h) != "undefined") {
       if(h > max_height) {
         max_height = h;
       }
      }
      w = $(this).width();
      if(typeof(w) != "undefined") {
       if(w > max_width) {
         max_width = w;
       }
      }
    });
    if(max_height > 0) {
      $('.equal-size-'+String(i)).height(max_height);
    }
    if(max_width > 0) {
      $('.equal-size-'+String(i)).width(max_width);
    }
}

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

Tips for changing the visibility of a div within table rows upon clicking

Struggling to solve this jQuery issue with a table that displays numbers on each row. I want to be able to click on one of the numbers, which is a href link, and toggle only the corresponding div called "test" instead of toggling all rows at once. How can ...

javascriptjqueryhtml

Issue with PHP retrieving initial value of post data

Hi there, I am facing an issue with my PHP code where the first value of the input field is not being displayed. However, when I check the console.log, it shows correctly. Here is my console.log output: https://i.sstatic.net/eZvg6.png PHP Output: https ...

javascriptphphtmlajax

The resource was treated as an image but sent with the MIME type application/octet-stream

Upon accessing my webpage, a warning message is displayed: Resource interpreted as Image but transferred with MIME type application/octet-stream The images on my page are in JPEG format. The server writes the image bytes to an output stream and sends it ...

javascripthtmlcssbrowsermime-types

Transferring data from JavaScript to PHP with the help of AJAX

I am encountering issues with my code, as I cannot seem to successfully send coordinates from JavaScript to PHP using AJAX. Although I can retrieve values from JavaScript into a textbox, the values are not being transferred to PHP. Any assistance on resolv ...

javascriptphpjqueryhtmlajax

Subtract and include characters in a string

Can you help me swap out \n for a new line? Below is the content retrieved from the database: <!DOCTYPE html>\n<html>\n<body>\n<div>\n<label class=\"s20 c03\">Label</label>\n< ...

phphtmlregexpreg-replacestr-replace

What is the most effective way to upload HTML and CSS files on Google's servers?

Our website is basic with HTML, CSS, and JavaScript and we're looking to host it on Google's servers. Should we use App Engine or set up a web server using Compute Engine? If we opt for App Engine, we'll have to choose a programming langua ...

htmlgoogle-app-enginegoogle-compute-engine

What is the best way to transfer an element and all its children to another div without losing any jQuery functionality?

At first, sharing an example of the JavaScript and HTML from my page is challenging because I couldn't make it work on JSfiddle. The issue I'm facing involves jQuery on a page where I've created two tabs. Essentially, it's the same con ...

javascriptjqueryhtmlcssdom

My DIV is not floating to the right as expected. What could be the issue?

I'm having trouble positioning the timer to float on the right top side of the logo. Even though using the regular style="float:right" works perfectly... <div id="whole_page" /> <div id="header" /> <?php echo " ...

csshtml

Bootstrap 4 collapsible navbar with a stacked design

I am struggling to create a collapsible navbar. Even though everything seems to be working, the nav items are not stacking vertically as they should be. Instead, they are appearing horizontally next to each other. Here is the code snippet: <nav class= ...

htmlcsstwitter-bootstrapbootstrap-4

Is it possible to adjust the maximum time limit for uploaded video files in Vue?

I'm facing an issue while trying to dynamically change the maximum value of a time input field in Vue JavaScript after uploading a video file. Despite setting the attribute `max` on the input element using JavaScript, I am unable to update the max val ...

javascripthtmllaravelvue.js

button to dim the image collection

On the top right corner of my image gallery, there's a button that, when clicked, creates an overlay darkening the image. I'm trying to figure out how to toggle this effect on and off with a click. Any suggestions on how I can achieve this? Here ...

javascripthtmlcss

CSS Media Query Assistance - optimizing text display for mobile responsiveness

I am currently facing an issue with my CSS code where the content is displaying as one long sentence on mobile devices, requiring users to scroll to read it. I am trying to modify it so that it displays as two lines on mobile. <!-- promo banner --> ...

htmlcssresponsive-designhidden

How to Style an Element Based on Fragment Identifier in Href Attribute Using CSS

I've implemented the tabview feature from the YUI3 library. This is how the markup code appears: <div id="demo" class="yui3-tabview-content"> <ul class="yui3-tabview-list"> <li class="yui3-tab yui3-widget yui3-tab-selected"> ...

csscss-selectorsfragment-identifier

Why doesn't the div click event trigger when the mouse hovers over an iframe?

My dilemma involves a div element with a click event. When the div is positioned over an iframe area (closer to the user than the iframe), the click event fails to trigger. However, if the div is located elsewhere and not above the iframe, the click event ...

javascriptjqueryhtmlcssiframe

Angular: Implementing asynchronous data retrieval for templates

I am currently facing the following issue: I need to create a table with entries (Obj). Some of these entries have a file attribute. When an entry has a file attribute (entry.file), I need to make a backend call to retrieve the URL of that file: public g ...

htmlangulartypescriptrxjs

Submenu in submenu not registering CSS hover events

Currently, on a website project that I'm developing, there is a submenu nested within another submenu. Interestingly enough, the level-2 submenu happens to be taller than its parent level-1 submenu. To control the visibility of these submenus, I' ...

htmlcss

The HTML code as content

While working on an AJAX project, I ran into this issue: http://jsbin.com/iriquf/1 The data variable contains a simple HTML string. After making the AJAX call, I noticed that the returned string sometimes includes extra whitespaces. I attempted to locat ...

javascriptjqueryhtml

Is there a way to retrieve the chosen selection from a select dropdown element using JavaScript?

As someone who is still learning JavaScript, I've come across a particular issue. Within a webpage, there is a select dropdown as shown below: <select id="selTipoRap" class="form-control" th:field="*{tipoRappresentante}&qu ...

javascripthtmljqueryjquery-events

The switch statement within Angular returns null when using getElementById()

In my single page application, I am using ng-switch to switch between different 'pages'. One of these pages contains a modal that is opened using the following function: var modal = document.getElementById('myModal'); vm.openModal = fu ...

javascriptangularjstwitter-bootstrap

footer extending beyond the previous div's boundaries

Struggling with frontend development and creating a layout in html, css3, and bootstrap 4? I've managed to incorporate a subtle animation in the background (https://codepen.io/mohaiman/pen/MQqMyo) but now facing issues with overlap when adding a foote ...

htmlcssbootstrap-4