Adaptable bootstrap grids and sections

Question

Adaptable bootstrap grids and sections

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb9994948f888f899a8bbbced5c9d5c8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <!-- Column 1 -->
    <div class="col-md-3">
      <p>Title1:</p>
      <p>Title2:</p>
      <p>Title3:</p>
    </div>

    <!-- Column 2 -->
    <div class="col-md-3">
      <p>Value1</p>
      <p>Value2 Value2 Value2 Value2 Value2 Value2Value2 Value2 Value2</p>
      <p>Value3</p>
    </div>

    <!-- Column 3 -->
    <div class="col-md-3">
      <p>Title4</p>
      <p>Title5</p>
      <p>Title6</p>
      <p>Title7</p>
       <p>Title8</p>
    </div>

    <!-- Column 4 -->
    <div class="col-md-3">
      <p>Value4</p>
      <p>Value5</p>
      <p>Value6</p>
      <p>Value7</p>
      <p>Value8</p>
    </div>
  </div>
</div>

The bootstrap layout provided above has the following structure and functionality:

Column 1 contains the title for the values displayed in column 2, while column 3 holds the titles for the values in column 4.

The issue arises when the content in column 2 is too large, causing it to span multiple rows. In such cases, the title in column 1 remains static, leading to an inconsistent display of data. To address this, the title in column 3 should align with the end of the content in column 2.

How can this alignment be achieved to ensure a visually cohesive display?

html css bootstrap-5

Answer 1

Answer №1

Breaking down the table into individual rows solves the issue and maintains consistent row heights. Give this a try!

<div class="container">
  <div class="row">
    <p class="col-md-3">Title1:</p>
    <p class="col-md-3">Value1</p>
    <p class="col-md-3">Title5</p>
    <p class="col-md-3">Value5</p>
  </div>
  <div class="row">
    <p class="col-md-3">Title2:</p>
    <p class="col-md-3">Value2 Value2 Value2 Value2 Value2 Value2 Value2 Value2</p>
    <p class="col-md-3">Title6</p>
    <p class="col-md-3">Value6</p>
  </div>
  <div class="row">
    <p class="col-md-3">Title3:</p>
    <p class="col-md-3">Value3</p>
    <p class="col-md-3">Title7</p>
    <p class="col-md-3">Value7</p>
  </div>
  <div class="row">
    <p class="col-md-3">Title4:</p>
    <p class="col-md-3">Value4</p>
    <p class="col-md-3">Title8</p>
    <p class="col-md-3">Value8</p>
  </div>
</div>

Alternatively, to maintain the same HTML structure, you can utilize JavaScript to determine the height of each <p> element and assign them a class based on their corresponding row. Then set the height of all elements in a row to match the element with the maximum height. Here's how:

<!-- Add class="row#" to each <p> element to connect them to a JavaScript constant -->

<div class="container">
    <div class="row">
      <!-- Column 1 -->
      <div class="col-md-3">
        <p class="row1">Title1:</p>
        <p class="row2">Title2:</p>
        <p class="row3">Title3:</p>
      </div>
      <!-- Column 2 -->
      <div class="col-md-3">
        <p class="row1">Value1</p>
        <p class="row2">Value2 Value2 Value2 Value2 Value2 Value2Value2 Value2 Value2</p>
        <p class="row3">Value3</p>
      </div>
      <!-- Column 3 -->
      <div class="col-md-3">
        <p class="row1">Title4</p>
        <p class="row2">Title5</p>
        <p class="row3">Title6</p>
        <p class="row4">Title7</p>
        <p class="row5">Title8</p>
      </div>
      <!-- Column 4 -->
      <div class="col-md-3">
        <p class="row1">Value4</p>
        <p class="row2">Value5</p>
        <p class="row3">Value6</p>
        <p class="row4">Value7</p>
        <p class="row5">Value8</p>
      </div>
    </div>
  </div>

<script>
    const rowElements = [
    document.querySelectorAll(".row1"),
    document.querySelectorAll(".row2"),
    document.querySelectorAll(".row3"),
    document.querySelectorAll(".row4"),
    document.querySelectorAll(".row5")
  ];
  
  rowElements.forEach(row => {
    let maxHeight = 0;
    row.forEach(rowElement => {
      const rowHeight = rowElement.offsetHeight;
      maxHeight = Math.max(maxHeight, rowHeight);
    });
  
    row.forEach(rowElement => {
      rowElement.style.height = `${maxHeight}px`;
    });
  });
</script>

Answer 2

Breaking down the table into individual rows solves the issue and maintains consistent row heights. Give this a try!

<div class="container">
  <div class="row">
    <p class="col-md-3">Title1:</p>
    <p class="col-md-3">Value1</p>
    <p class="col-md-3">Title5</p>
    <p class="col-md-3">Value5</p>
  </div>
  <div class="row">
    <p class="col-md-3">Title2:</p>
    <p class="col-md-3">Value2 Value2 Value2 Value2 Value2 Value2 Value2 Value2</p>
    <p class="col-md-3">Title6</p>
    <p class="col-md-3">Value6</p>
  </div>
  <div class="row">
    <p class="col-md-3">Title3:</p>
    <p class="col-md-3">Value3</p>
    <p class="col-md-3">Title7</p>
    <p class="col-md-3">Value7</p>
  </div>
  <div class="row">
    <p class="col-md-3">Title4:</p>
    <p class="col-md-3">Value4</p>
    <p class="col-md-3">Title8</p>
    <p class="col-md-3">Value8</p>
  </div>
</div>

Alternatively, to maintain the same HTML structure, you can utilize JavaScript to determine the height of each <p> element and assign them a class based on their corresponding row. Then set the height of all elements in a row to match the element with the maximum height. Here's how:

<!-- Add class="row#" to each <p> element to connect them to a JavaScript constant -->

<div class="container">
    <div class="row">
      <!-- Column 1 -->
      <div class="col-md-3">
        <p class="row1">Title1:</p>
        <p class="row2">Title2:</p>
        <p class="row3">Title3:</p>
      </div>
      <!-- Column 2 -->
      <div class="col-md-3">
        <p class="row1">Value1</p>
        <p class="row2">Value2 Value2 Value2 Value2 Value2 Value2Value2 Value2 Value2</p>
        <p class="row3">Value3</p>
      </div>
      <!-- Column 3 -->
      <div class="col-md-3">
        <p class="row1">Title4</p>
        <p class="row2">Title5</p>
        <p class="row3">Title6</p>
        <p class="row4">Title7</p>
        <p class="row5">Title8</p>
      </div>
      <!-- Column 4 -->
      <div class="col-md-3">
        <p class="row1">Value4</p>
        <p class="row2">Value5</p>
        <p class="row3">Value6</p>
        <p class="row4">Value7</p>
        <p class="row5">Value8</p>
      </div>
    </div>
  </div>

<script>
    const rowElements = [
    document.querySelectorAll(".row1"),
    document.querySelectorAll(".row2"),
    document.querySelectorAll(".row3"),
    document.querySelectorAll(".row4"),
    document.querySelectorAll(".row5")
  ];
  
  rowElements.forEach(row => {
    let maxHeight = 0;
    row.forEach(rowElement => {
      const rowHeight = rowElement.offsetHeight;
      maxHeight = Math.max(maxHeight, rowHeight);
    });
  
    row.forEach(rowElement => {
      rowElement.style.height = `${maxHeight}px`;
    });
  });
</script>

Adaptable bootstrap grids and sections

Answer №1

Similar questions

Does the DOMContentLoaded event fire only after all script tags have been downloaded?

I want to have a video playing in the background of my home page, but when viewers access it on their mobile devices, I would like to display a specific image instead

Guide to linking properties to Bootstrap 5 components within Angular

Transforming a Multi-Dimensional Array into an HTML Table

Display the scroll bar in HTML only when the content exceeds the maximum height

Why isn't my HTML reflecting the CSS changes I've made?

Steps for displaying innerHTML values conditionally with a pipe

List formatted in a table

Fieldset containing a table with a horizontal scrollbar

What is causing the variables in my HTML tags to not appear?

Tips for adjusting image hues in Internet Explorer?

Missing td data when using Beautiful Soup to parse HTML tables in Python

What is the rationale behind positioning the closing right angle-bracket of an HTML tag next to the opening left angle-bracket of a different HTML tag?

Insert between the top navigation bar and the sidebar menu

Creating a seamless scrolling experience with a designated stopping point - here's how to achieve it!

Is there a way to create a dropdown selection for font families with vue js?

Using CSS3 easing on Mobile Safari can help create smooth transitions

Struggling to locate the element using xpath on a JavaScript enabled website in Selenium with Chrome

Looking to retrieve the values of a 3-level dropdown using ajax. Successfully fetched the value of the 1st dropdown, but unsure of how to retrieve the values of the 2nd and

Top tips for optimizing HTML and utilizing div elements