What is causing the discrepancy in the height of my bootstrap 4 columns?

I recently started working with bootstrap 4 and I am having an issue with the columns not appearing at the same height as expected. Here is the code snippet I am using: 

<div class="row">
   <div class="col-8">
     <div class="projectDescBox">
       <h5>Project</h5>
       <p>Stuff here</p>
     </div>
   </div>
   <div class="col-4">
     <div class="projectDescBox">
       <h5>heading</h5>
       <p>a lot longer stuff here. This box should be a lot longer.a lot longer stuff here. This box should be a lot longer.a lot longer stuff here. This box should be a lot longer.</p>
    </div>
  </div>

(The code is in a container class). According to the bootstrap documentation, the columns should be automatically the same height. However, the output I am getting looks like this: screenshot

Can anyone help me figure out what I am missing? Thank you!

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

It's likely that your columns have the same height, but the projectDescBox is not matching up. To resolve this, you can utilize the h-100 class (height:100%) to ensure the inner boxes fill the height.

<div class="projectDescBox h-100">
       <h5>heading</h5>
       <p>a lot longer stuff here. This box should be a lot longer.a lot longer stuff here. This box should be a lot longer.a lot longer stuff here. This box should be a lot longer.</p>
</div>

Furthermore, it's important to note that in Bootstrap 4, col-xs-* has been replaced with col-*. Additionally, the multi-tier classes are redundant as all columns are the same width at every tier.

For example: 

col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8
,

equates to: col-8

Multi-tier classes are only necessary when different widths are desired at each tier (e.g., col-8 col-sm-6 col-lg-4 col-xl-3)

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

JQuery Mobile fails to apply consistent styling to user input check items within a list

I have successfully implemented the functionality to add user input items to a checklist. However, I am facing an issue where the newly added items are not adhering to Jquery Mobile's styling. Here is a screenshot showcasing the problem: Below is th ...

javascriptjqueryhtmlformsjquery-mobile

Leverage the power of Angular by configuring a custom webpack setup to

Implementing the CSS modules concept in my Angular app has been a challenge due to conflicts with existing frontend CSS. My project utilizes SCSS, and I am looking for a way for webpack to modularize the CSS generated from SCSS during the final build step. ...

cssangularwebpackwebpack-style-loadercss-loader

Displaying a box with a question mark using Glyphicon and Font Awesome icons

I'm having a problem with my website not displaying the Glyphicons or Font Awesome Icons. When I enter the code, it shows up like this: http://prntscr.com/8qwwmd. This is the first time I've encountered this issue and it's only affecting som ...

htmlcssfont-awesomeglyphicons

Accordion Widget in Bootstrap fails to initiate with proper icon

I recently designed a webpage showcasing different parts of a privacy policy. Using Bootstrap and its accordion feature, I successfully displayed the information with standard icons. However, I encountered an issue where the accordion initially loads with ...

htmlcssbootstrap-5

Image with text overlay

In my content, the setup includes the following: <p class="All-Book-Text">Maecenas iaculis, ipsum at tempor placerat, orci ligula aliquam enim, sit amet sagittis turpis enim sit amet lorem. Praesent dapibus pretium felis, et tempus nibh posuere a.&l ...

css

Stop specific characters from being input into a text field

My goal is to restrict the characters allowed in a text box to the following: A to Z in both upper and lower case, Ñ and ñ, and space. I have a function that runs onkeyup: FieldOnKeyUp(el) { !(/^[A-zÑñ-\s]*$/i).test(el.value)?el.value = el.value ...

javascripthtmlcss

The memory usage steadily increases when you refresh data using the anychart gantt chart

I have a basic anychart code to update a gantt chart every second: function initializeSchedule(){ anychart.onDocumentReady(function () { anychart.data.loadJsonFile("../scheduler?type=getschedule", function (data) { documen ...

javascripthtmlajaxanychart

Begin the ul element from the left-hand side

Check out my latest JSFiddle creation: http://jsfiddle.net/alonshmiel/Ht6Ym/2409/ I'm attempting to align the ul element on the left side of the page: I've experimented with the following CSS rules: margin-left:0px; float: left; Unfortunatel ...

htmlcss

By employing timeUpdate in conjunction with currentTime

I am looking to utilize the timeUpdate and currentTime functionalities to display or hide a div at a specific time during video playback. I have been able to make it work, but it seems to be showing and hiding every second I specify. Below is the code I ...

javascripthtmlcss

I'm looking to design a button with text positioned beneath an icon using either Bootstrap 5 or CSS. How

Is there a way to create buttons like the ones shown in the examples using Bootstrap 5 or custom CSS classes? Examples: [Set of buttons][1] Notice how some of them function as dropdown buttons. I've searched for examples but most of them only show ...

cssbuttonbootstrap-5bootstrap-cards

Is there a way to override the padding of a container?

Working with Wordpress for the first time has been quite a challenge. Adjusting to everything is causing me some major headaches. So, I've got this container div and added a lazy 10px padding. However, for the theme I'm attempting to develop, I ...

csshtmlpadding

Tips for creating a responsive <hr> tag

Help needed with adjusting the horizontal line tag on a webpage created using HTML, CSS, and Bootstrap. The issue arises when the window size changes to extra small. Initially, the hr tag was set to 400px, which looked great on full-screen view. However, ...

htmlcssresponsive-designbootstrap-4

Removing an active image from a bootstrap carousel: A step-by-step guide

Within my bootstrap carousel, I have added two buttons - one for uploading an image and the other for deleting the currently displayed image. However, I am unsure how to delete the active element. Can someone provide assistance with the code for this but ...

javascripthtmltwitter-bootstrapcarousel

Tips for keeping the header section anchored to the top of the page

I am having trouble getting the menu bar and logo to stick at the top of my header section in the template. I have been trying different solutions, including using the sticky.js plugin for almost 4 days now but it's not working. I also have parallax e ...

javascriptjqueryhtmlcss

Avoiding scrolling when a button (enveloped in <Link> from react-scroll) is pressed in React

Currently, I am implementing the smooth scroll effect on a component using react-scroll. However, adding a button inside the component to create a favorite list has caused an issue where the smooth scroll effect is triggered upon clicking the button. Is ...

javascripthtmlcssreactjs

What could be causing my col-8 to not align perfectly in the center of the grid system?

Recently, I've been delving into tutorials on how to utilize bootstrap4 and have been experimenting with the grid system. However, I've encountered an issue where my layout is not aligned in the center as intended. Here's a snippet of my cod ...

htmlbootstrap-4centeringcol

Is it better to apply the font-family to the body or to the html element?

Is it more appropriate to specify the font-family CSS property on the html element or the body element? html { font-family: sans-serif; } or body { font-family: sans-serif; } I've looked into this issue online, but there doesn't seem to ...

htmlcss

Transforming CSS Styles of Elements with Bootstrap

After incorporating links and scripts for Bootstrap v4.5 into my project, I quickly noticed that it automatically overrides the styles of text, buttons, and other elements I had previously customized. While I added a Bootstrap alert for authentication pur ...

htmlcssbootstrap-4

Using jquery to target and manipulate elements with the div selector

I need assistance with adding a selector on my webpage where users can choose one option and retrieve the id of the selected part. This id will then be used in a link. I am new to using jQuery, so I am having trouble implementing this feature. Below is an ...

jquerycssselector

Determine the sum of all cell values in rows that share the same date using JavaScript

I am currently developing a dashboard for an online food ordering platform. One of the essential functionalities I need to implement is the ability to display the total sales amount per day, categorized by payment methods, when users click on a specific mo ...

javascripthtmlvue.js