Ensure that the div elements fully occupy the remaining space within the box

I'm looking to bring this idea to life:

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

Most of my work is complete, but I need the boxes to fill up all available space in the row.

This is the HTML code I've used with Bootstrap. How can I achieve this?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d1dcdcc7c0c7c1d2c3f3869d819d81">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<div class="row gx-2 margin">
  <div class="col-md-4">
    <div class="bg-gray padding-box">
      <p><span class="fw-bold mb-1">"I needed a lawyer to do my will</span> and through CMCs EAP | found a great one that was very professional!”</p>
    </div>
    
    <div class="bg-gray padding-box mt-2">
      <p class="fw-bold mb-1">
        “I bought a new exercise bike and since we now have the Lifestyle benefit, I am eligible for $500 of the cost to be paid back to me. Simple process to get reimbursed!”
      </p>
    </div>
    
    <div class="bg-gray padding-box mt-2">
      <p class="fw-bold mb-1">
        "The annual physical was especially life saving this year because my doctor did a full blood panel and found that my potassium and magnesium were extremely low which could have been a very serious situation. The fact that the visit is free is a plus!”
      </p>
    </div>
  </div>
  
  <div class="col-md-8">
    <div class="row gx-2">
      <div class="col-md-6">
        <div class="bg-gray padding-box">
          <p class="fw-bold mb-1">
            "I found MDLive to be very easy to use and very convenient - especially when you're sick and it's the weekend when most doctor's offices are closed. It's also really nice to have when you are out of town and not familiar with the area or doctors where
            you are."
          </p>
        </div>
        
        <div class="bg-gray padding-box mt-2">
          <p class="fw-bold mb-1">
            "With the new Lifestyle benefit, I bought a rower! From not being active for a few years I'm now rowing 3-4 times per week and love it."
          </p>
        </div>
      </div>
      
      <div class="col-md-6">
        <div class="bg-gray padding-box">
          <p class="fw-bold mb-1">
            "The 401k and ESPP are awesome because CMC matches which makes me feel that the company cares about our future. It's a very simple & easy process to sign up!”
          </p>
        </div>
        
        <div class="bg-gray padding-box mt-2">
          <p class="fw-bold mb-1">
            "MD live has been great! Especially with COVID not wanting to go to a doctor office; you call, and the appointment is done right away. They have treated my issues with great results."
          </p>
        </div>
      </div>
    </div>
    
    <div class="bg-gray padding-box mt-2">
      <p class="fw-bold mb-1">
        "I have been extremely happy with the international pharmacy. I talk it up to any employee I hear who is complaining about the cost of their expensive prescriptions. I've saved enough on one prescription to actually pay for my health insurance for the
        entire year. If that isn't amazing, I don't know what is!”
      </p>
    </div>
  </div>
</div>

</div>

The implementation from the code appears as shown in image 1. I just need to remove the excess white space between the gray containers. My goal is to have the gray containers expand to fill the extra space while leaving a margin.

Answer №1

To ensure the cols fill the entire space, apply the align-items-stretch property and make it a flex container using d-flex flex-wrap.

See the example below with added borders to illustrate the concept:

[class^=col] >* {border:solid;}/* demo purpose */
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d5f5252494e494f5c4d7d08130f130f">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="row gx-2 align-items-stretch " style="" >
  <div class="col-md-4 d-flex flex-wrap align-items-stretch">
    <div class="bg-gray padding-box">
      <p><span class="fw-bold mb-1">"I needed a lawyer to do my will</span> and through CMCs EAP | found a great one that was very professional!”</p>
    </div>

    <div class="bg-gray padding-box mt-2">
      <p class="fw-bold mb-1">
        “I bought a new exercise bike and since we now have the Lifestyle benefit, I am eligible for $500 of the cost to be paid back to me. Simple process to get reimbursed!”
      </p>
    </div>

    <div class="bg-gray padding-box mt-2">
      <p class="fw-bold mb-1">
        "The annual physical was especially life saving this year because my doctor did a full blood panel and found that my potassium and magnesium were extremely low which could have been a very serious situation. The fact that the visit is free is a plus!”
      </p>
    </div>
  </div>

  <div class="col-md-8 d-flex flex-wrap align-items-stretch">
    <div class="row gx-2 d-flex flex-wrap align-items-stretch">
      <div class="col-md-6 d-flex flex-wrap align-items-stretch">
        <div class="bg-gray padding-box">
          <p class="fw-bold mb-1">
            "I found MDLive to be very easy to use and very convenient - especially when you're sick and it's the weekend when most doctor's offices are closed. It's also really nice to have when you are out of town and not familiar with the area or doctors where
            you are."
          </p>
        </div>

        <div class="bg-gray padding-box mt-2">
          <p class="fw-bold mb-1">
            "With the new Lifestyle benefit, I bought a rower! From not being active for a few years I'm now rowing 3-4 times per week and love it."
          </p>
        </div>
      </div>

      <div class="col-md-6 d-flex flex-wrap align-items-stretch">
        <div class="bg-gray padding-box">
          <p class="fw-bold mb-1">
            "The 401k and ESPP are awesome because CMC matches which makes me feel that the company cares about our future. It's a very simple & easy process to sign up!”
          </p>
        </div>

        <div class="bg-gray padding-box mt-2">
          <p class="fw-bold mb-1">
            "MD live has been great! Especially with COVID not wanting to go to a doctor office; you call, and the appointment is done right away. They have treated my issues with great results."
          </p>
        </div>
      </div>
    </div>

    <div class="bg-gray padding-box mt-2 ">
      <p class="fw-bold mb-1">
        "I have been extremely happy with the international pharmacy. I talk it up to any employee I hear who is complaining about the cost of their expensive prescriptions. I've saved enough on one prescription to actually pay for my health insurance for the
        entire year. If that isn't amazing, I don't know what is!”
      </p>
    </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

A guide on managing PHP form validation errors with bootstrap alert messages

I am currently working on a web application using PHP which includes a form for users to create an account. As part of the server-side validations, I require the password to be a minimum of 8 characters. My goal is to display any error messages returned fr ...

Ruling out the use of jQuery script within a dynamic framework

I have a unique jQuery script to create a "Back to Top" functionality: <script type="text/javascript"> $(document).ready(function(){ // Initially hide the #TopButton $("#TopButton").hide(); // Fade in the #TopButton on scrolling $(function () { ...

Tips for directing attention to a specific row with an input field in JavaScript

I duplicated a table and added an input field for users to search or focus on a specific row. However, there are two issues: When a user enters a row number, the table displays the wrong row - for example, if the user enters 15, the table shows row number ...

Tips for extracting text from a selenium webelement icon that displays hovertext

Let's use Amazon as an example. Suppose we want to extract the star rating for a product. When hovering over the stars, we see a text element that says "4.0 out of 5 stars" and upon inspecting the code, we find: <span class="a-icon-alt">4.0 ou ...

CSS text wrapping will now occur on underscores as well as spaces and hyphens

I am facing an issue with long file names in my HTML formatting causing overflow. These file names use underscores instead of spaces, making it difficult to wrap them properly. For example: Here_is_an_example_of_a_really_long_filename_that_uses_underscore ...

Using SVG files as properties in React from a data.js file

I have a website where I store my content in a data.js file and pass it to my components using props. Everything is working correctly, except for my .svg files. When I try to display them, they do not appear. However, if I change the extension of the image ...

display child element at full width within a parent element that is not full width

I have a container with a maximum width of 1024px, and I want one of its child elements to take up 100% width starting from the left edge of the screen. Is there a way to achieve this without adding extra HTML markup? I know I can make the child element 1 ...

How do I hide a dropdown menu when the selector's value changes in iOS6?

I'm currently developing a hybrid application using Worklight. When I tap on a select control, a native dropdown appears. However, when I choose an option and the onchange event is triggered, the dropdown doesn't disappear unless I tap on the do ...

An easy way to switch animations using CSS display:none

Dealing with some missing gaps here, hoping to connect the dots and figure this out. I'm attempting to create a functionality where a div slides in and out of view each time a button is clicked. Eventually, I want multiple divs to slide out simultane ...

What is the best way to retrieve the root binding node from a viewmodel in order to apply jQuery.blockUI when performing an AJAX post request?

Within my code, I have a designated DIV element that serves as the root node for applying knockout bindings like so: ko.applyBindings(viewModel, document.getElementById('myContainerDiv')); In all of my viewmodel types, there is a generic post m ...

Bootstrap: Display a single product on the Carousel Product Slider for the smallest view

I found an example I'm using at this link: I noticed that when I resize my BrowserWindow, the boxes start to shrink. However, when the width reaches about 990px, the single products are rearranged in a 4-block layout from the initial width. Is there ...

Retrieving information from an API and presenting it as a name with a link to the website

I am attempting to retrieve information from an API and present it in the format Name + clickable website link. Although I have managed to display the data, the link appears as text instead of a hyperlink. Here is my Ajax script: $(function() { ...

How can JavaScript be used to automatically send a user to a designated page based on a selected option in

I am in the process of creating a JavaScript function that redirects users based on their selection from a dropdown menu. Additionally, I need to ensure that the word "admin" is set for both the username and password fields. view image here function my ...

What is the best way to ensure that the value of a <textarea> in jQuery is consistently saved and reflected in the HTML document?

I have a function on my website that allows users to input text which is then displayed on the page. However, this text disappears when the page is reloaded and does not stay permanently. How can I use jQuery to make sure that the entered text remains on ...

Is there a way to modify or alter the layout specifically for mobile devices?

Currently, my desktop version displays the image first followed by content (h1, p, button), and then repeats in that order. However, I would like to restructure the HTML for the mobile version to make it more user-friendly. How can I achieve this without d ...

Exploring elements in Javascript

I am attempting to retrieve values from various elements when a 'a' element is clicked. Consider the following code: <tr data-id="20"> <div class="row"> <td> <div class="btn-group"> <a data-checked= ...

Having issues with the sidebar malfunctioning and unsure of the cause

<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> I've been working on creating a sidebar for my website, but it's not functioning as expect ...

Calculating the time gap between two consecutive "keyup" occurrences

I am in need of creating a basic point of sale system using Javascript. I have a barcode scanner that functions like a keyboard. My goal is to automatically identify when the input is coming from the barcode scanner and then generate a report with the sc ...

Adding Components Dynamically to Angular Parent Dashboard: A Step-by-Step Guide

I have a dynamic dashboard of cards that I created using the ng generate @angular/material:material-dashboard command. The cards in the dashboard are structured like this: <div class="grid-container"> <h1 class="mat-h1">Dashboard</h1> ...

What is the most effective way to loop through an object containing DOM selectors as values, and subsequently utilize them to assign new values?

I have a function that takes an object retrieved from a database as its argument. My goal is to display the values of this object in a form by associating each value with a specific DOM selector. Here is the code snippet where I achieve this: function pai ...