I'm wondering why the columns in my Bootstrap 4 grid don't have uniform height and width

Question

I'm wondering why the columns in my Bootstrap 4 grid don't have uniform height and width

Currently, I am utilizing Bootstrap 4 to create a grid view. However, I have encountered an issue where my columns do not have the same width and their heights are uneven, as evident from the borders. It is mentioned that in Bootstrap 4, columns should inherently have the same height and width, but for some reason, this functionality does not seem to be working in my case. Any assistance on this matter would be greatly appreciated.

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

Below is the code snippet for my grid:

.grid-header {
  background-color: #002f5a;
  color: white;
  height: 70px;
  font-weight: bold;
  font-size: 14pt;
}

.grid-header .col-sm {
  border: 1px solid white;
  padding: 10px 20px 10px 20px;
}

.grid-row {
  border-bottom: 1px solid lightgray;
  border-right: 1px solid lightgray;
  ...

...and so on

Edit: Upon further observation, it appears that this issue only arises when the content within my columns exceeds a certain length, causing them to span multiple lines. Using "text-truncate" is not a viable solution as it would truncate the content unnecessarily.

html css bootstrap-4 grid col

Answer 1

Answer №1

To ensure each row is of equal length, add a w-100 after every row.

<div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
</div>

Answer 2

To ensure each row is of equal length, add a w-100 after every row.

<div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
</div>

Answer 3

Answer №2

Finally, I found a solution after spending some time on it.

The issue with the width stemmed from the fact that the "emails" were too long and since they were written as one continuous word (without spaces), they could not break properly. To fix this, I made a simple addition to my CSS:

.grid-column-value {
    ...
    word-break: break-word;
    ...
}

To address this problem, you can also consider using options like Bootstrap's .text-truncate class based on your specific requirements.

As for the height-related problems, they occurred because of the inclusion of the .align-items-center class in my row element. By removing this class and making some adjustments in my CSS, I was able to resolve the issue:

.grid-column-value {
    ...
    display: flex;
    align-items: center;
}

.grid-action-column {
    ...
    display: flex;
    align-items: center;
}

This modification essentially provides the same effect as .align-items-center, but focuses directly on the individual columns instead of the entire row.

Now, the grid layout appears as follows: https://i.sstatic.net/90Bq8.png

Answer 4

Finally, I found a solution after spending some time on it.

The issue with the width stemmed from the fact that the "emails" were too long and since they were written as one continuous word (without spaces), they could not break properly. To fix this, I made a simple addition to my CSS:

.grid-column-value {
    ...
    word-break: break-word;
    ...
}

To address this problem, you can also consider using options like Bootstrap's .text-truncate class based on your specific requirements.

As for the height-related problems, they occurred because of the inclusion of the .align-items-center class in my row element. By removing this class and making some adjustments in my CSS, I was able to resolve the issue:

.grid-column-value {
    ...
    display: flex;
    align-items: center;
}

.grid-action-column {
    ...
    display: flex;
    align-items: center;
}

This modification essentially provides the same effect as .align-items-center, but focuses directly on the individual columns instead of the entire row.

Now, the grid layout appears as follows: https://i.sstatic.net/90Bq8.png

I'm wondering why the columns in my Bootstrap 4 grid don't have uniform height and width

Answer №1

Answer №2

Similar questions

Parsing HTML in PHP from a specified URL

Creating an Image Link within Nivo Slider

What steps do I need to follow in order to incorporate the SQLite database into my application?

When I click away from the screen, the bottom border of the button disappears

Animate text and div elements with bounce or fade-in effects when they appear on the screen in a React application

JavaScript's Math.round function does not always produce accurate results

Enhancing jQuery Component while making an Ajax request

Load information from a JavaScript object when the user clicks dynamically

Ways to include text beneath an image within a column using Bootstrap HTML code

The radio button is displaying the text 'on' instead of its designated value

How can I ensure that a button remains fixed at the bottom of a Material UI React Component?

What is the quickest way to select CSS elements?

Managing post and session data during PHP form submission

I'm puzzled as to why the color isn't showing up on my navigation bar even though I used "padding: 10px !important;"

Developing a system mode called "night mode"

Instantly display modal upon website loading

Is there a way to activate a click event on a particular child element within a parent element?

Is there a way to change this from webkit to moz?

Maintain the selected list item after filtering in AngularJS

degree of transparency when semi-transparent elements overlap