Height discrepancy in Bootstrap 4 columns following background color adjustment

Currently, I am working on a bootstrap code. Within columns, I have set a div with a background color applied. However, the background color only extends to the content within the column, leading to uneven heights in different columns due to variations in data. I chose this approach because I wanted spacing between the columns to resemble cards with rounded edges. How can I ensure that all columns have the same height?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xl-2">
  <div class="rounded" style="background-color:aqua">
    <span>some text here</span>
  </div>
</div>
<div class="col-xl-2">
  <div class="rounded" style="background-color:pink">
    <span>some text here</span>
    <p>some more text</p>
    <p>some more text</p>
  </div>
</div>
<div class="col-xl-2">
  <div class="rounded" style="background-color:green">
    <span>some text here</span>
    <p>some more text here</p>
    <h5>extra work</h5>
  </div>
</div>
</div>
</div>

htmlcssbootstrap-4responsive

Answer №1

Essentially, this situation seems like a repetition.

The reason the columns display equal heights is due to the use of flexbox in Bootstrap 4. Simply include h-100 (height:100%) in the rounded containers to ensure they occupy the full height of the columns.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col">
  <div class="rounded h-100" style="background-color:aqua">
    <span>some text here</span>
  </div>
</div>
<div class="col">
  <div class="rounded h-100" style="background-color:pink">
    <span>some text here</span>
    <p>some more text</p>
    <p>some more text</p>
  </div>
</div>
<div class="col">
  <div class="rounded  h-100" style="background-color:green">
    <span>some text here</span>
    <p>some more text here</p>
    <h5>extra work</h5>
  </div>
</div>
</div>
</div>

Answer №2

It appears that your issue involves ensuring all elements with the .col class have the same height...

To achieve this, you can set the CSS property height: 150px; (adjust size as needed) on each .col element. Additionally, if you want the background color to fill the entire .col, it should be applied directly to the inner div within each .col.

Note that the blue and orange colors are only for visual representation of each .col's height.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xl-2" style="height: 150px; background-color: orange;">
  <div class="rounded" style="background-color:aqua">
    <span>some text here</span>
  </div>
</div>
<div class="col-xl-2" style="height: 150px; background-color: blue;">
  <div class="rounded" style="background-color:pink">
    <span>some text here</span>
    <p>some more text</p>
    <p>some more text</p>
  </div>
</div>
<div class="col-xl-2" style="height: 150px; background-color: orange;">
  <div class="rounded" style="background-color:green">
    <span>some text here</span>
    <p>some more text here</p>
    <h5>extra work</h5>
  </div>
</div>
</div>
</div>

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

Press the toggle switch button to easily switch between two distinct stylesheets

With a looming exam at university, my web design professor has tasked us with creating a website. The unique challenge is to implement a style change by seamlessly switching between two different CSS stylesheets. My idea is to start with a black and white ...

javascriptcss

Creating a dynamic Bootstrap card body with an image using Vue.js and integrating it with Firestore cloud DB and a local image source

I'm in the process of developing a compact Vue js page named AddItem.vue which will store the following data. data (){ dish_name: null, dish_description: null, dish_type: null, dish_image: null } The plan is to have a boo ...

vue.jsbootstrap-4google-cloud-firestoreaxios

Optimal method for streaming and viewing an mkv video captured with ffmpeg in a web browser

Is there a way to stream a video recorded with ffmpeg in a web browser using the HTML5 video tag? I currently have this code on my page, with the URL pointing to a video file (example.mkv) being recorded by ffmpeg. <video class="video-player" controls ...

htmlffmpegvideo-streaminghtml5-video

Warning button covers alert box

Bootstrap warning message covering the Create Repository button. Tried setting display:block, but it didn't fix the issue. Check out this JSFiddle for more details. <a href="#"> <button style="width:250px; display:block" class="btn btn-p ...

htmlbootstrap-4

Bootstrap 4: Adjusting text placement on images for various screen sizes

I am trying to achieve a specific text placement on my image, as shown here: https://i.sstatic.net/xgoKo.jpg I want the text slightly off-center from the "Center" point of the image (to avoid overlapping with the phone in the image), so using text-center w ...

htmlbootstrap-4

Guide to adjusting margin size according to specific screen size thresholds?

I've set up a series of reactstrap cards that are dynamically organized into rows. On "md" screen sizes and larger (bootstrap), there will be 3 cards per row, while fewer screens will display 2 cards. Here's the component: <Card outline ...

htmlcssreactjsbootstrap-4

Issues with HTML5 audio playback ceasing after a period of time due to a leak

Currently, I am working on developing an HTML5/javascript real-time strategy game. Throughout the gameplay, there are multiple sounds being played continuously. However, what I have noticed is that after a period of time, the sounds seem to "crash" and all ...

javascripthtmlaudio

JavaScript: Utilize the moveTo() function in fullpage.js to navigate between various sections

SCENARIO: My goal is to switch between different slides within a specific section using fullpage.js by clicking on one of five elements. ISSUE: The moveTo() function works smoothly when transitioning from the first slide to any of the other four. Howeve ...

javascriptjqueryhtmlfullpage.js

Issue with continuous loader malfunction

I integrated a 3-second mini-loading animation on my website. It shows up every time I refresh the site or navigate to another page. The issue I'm facing is that once I add the loading section, it never stops (it should only last for 3 seconds). Usua ...

javascripthtmljquerycss

Alter a portion of the style using jQuery

After attempting to use jQuery to change the style of a specific element, I was surprised to find that it didn't work as expected. The typical process for changing the style involves the following code: $(document).ready(function(){ $("p").css({" ...

javascripthtmljquerycss

Include a parent class within the style tags in your CSS code

Currently, I am facing an issue with a web application that I am developing. On the left side of the page, there is an editable area, and on the right side, there is a live preview. The live preview area contains an HTML file with specific fields that can ...

javascriptjqueryhtmlcssless

What is the best way to conceal a div when there are no visible children using AngularJS?

I need help with hiding a parent div only if all the child items are invisible. I have successfully hidden the parent when there are no children, but I am struggling to figure out how to hide it based on visibility. <div ng-repeat="group in section.gro ...

javascriptjqueryhtmlangularjsvisibility

Exploring the world of interactive storytelling through a basic PHP text adventure

I recently completed coding a text adventure using functions like fgets(STDIN) that works in the command line. Now, I want to convert it to run on HTML (internet browser) but I'm facing a challenge. I am unsure how to transition from this: $choose=0; ...

phphtmlfunction

Tips for creating a dynamic curved SVG path

I'm looking to draw a black border only along the inside of this SVG. I've tried adding stroke and setting the stroke-width, but that applies the border to the entire SVG. Is there a way to limit the stroke to a certain point within the SVG? d ...

javascripthtmlsvgpath

Determining the measurements of an svg path without relying on the bounding box

Is there a way to retrieve the dimensions of an svg path and showcase it within a div without relying on the bounding box method? I've noticed that the bounding box can be buggy in Webkit especially with bezier curves. Just so you know, I am currently ...

javascripthtmlsvgjquery-svglibrsvg

steps for executing a Google script

In my program, the structure is as follows: // JavaScript function using Google Script 1. function F1() { ...... return (v1); } // HTML code for Google 1. <script> 2. function F2() { 3. alert ( 1 ); 4. function F2(); 5. alert ( 2 ); 6 ...

javascripthtmlgoogle-apps-script

Unable to utilize the ng-disabled directive

Although this question may seem redundant, rest assured that I have exhausted all possible solutions. The issue lies in a disabled button using ng-disabled. I have a variable in the $scope that triggers a change in the ng-disabled attribute, but it fails t ...

htmlangularjs

Arranging images next to each other using CSS and HTML

I've been trying to arrange four images side by side, with two on the top row and two on the bottom. I want to ensure they stay consistent across all browser sizes except for mobile. Here is what I have attempted so far: #imageone{ position: absol ...

javascripthtmlcss

What could be causing the Floating Action Button to not be anchored to the right as it should be?

My FAB is successfully stickied to the bottom of the screen: https://i.sstatic.net/gpaph.png However, it refuses to stick or anchor itself to the right edge of the table where I would like it to be: https://i.sstatic.net/TlhZn.png Any idea why this mig ...

cssangularangular-material

Organize the menu in Angular by sorting it alphabetically

I am currently exploring a way to organize the buttons inside the menu in alphabetical order using a function in the TypeScript file. Please see the code snippet below, which utilizes Angular Material. <mat-menu #menu3="matMenu" [overlapTrig ...

javascripthtmlangulartypescript