How to adjust the height of a column in Bootstrap?

I've created features in the html using Bootstrap. I'm trying to unisize each box height wise.
ScreenShot of the boxes

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#hr-1 {
  width: 100px;
  margin-left: 20%;
}

#features {
  background-color: #f0f8ff67;
  border-radius: 50px;
  padding: 50px 20px;
}

#cont2 {
  border-right: 2px solid #000;
}

.feature {
  background-color: #f0f8ff47;
  border-radius: 25px;
  padding: 20px;
  height: 100%;
}

.feature:hover {
  background-color: #f0f8ff87;
}

.feature>img {
  margin-bottom: 1rem;
}

<!-- language: lang-html -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="container-fluid" id="features">
  <div class="row">
    <div class="col-md-4 px-4 textw" id="cont2">
      <h3>What We Develop</h3>
      <hr id="hr-1">
      <p>Looking for a web development agency to bring your vision to life? We specialize in creating exceptional websites and applications tailored to your needs. Our experienced team ensures user-friendly, secure, and scalable results. With a proven track
        record, we'll transform your web application dreams into reality. Contact us now and let's achieve your online goals together.</p>
    </div>
    <div class="col-md-8">
      <div class="container-fluid">
        <div class="row align-content-between">
          <div class="col-xxl-3 col-xl-4 col-lg-6">
            <div class="feature-wrapper m-1">
              <div class="feature">
                <img src="./images/layers.png" alt="layers icon" style="width: 50px;">
                <h3 class="fs-4 text-body-emphasis">Custom Web Application Development</h3>
                <p>Our agency offers bespoke web application development services to cater to your specific business requirements. Whether you need a customer management system, inventory tracking solution, or a booking platform, we have you covered.</p>
              </div>
            </div>
          </div>
          <div class="col-xxl-3 col-xl-4 col-lg-6">
            <div class="feature-wrapper m-1">
              <div class="feature">
                <img src="./images/online-shop.png" alt="shopping icon" style="width: 50px;">
                <h3 class="fs-4 text-body-emphasis">E-commerce Solutions</h3>
                <p>We specialize in building robust and user-friendly e-commerce websites that enable seamless online shopping experiences for your customers. From product catalog management to secure payment gateways, we ensure a secure and efficient online
                  selling platform.</p>
              </div>
            </div>
          </div>
          <div class="col-xxl-3 col-xl-4 col-lg-6">
            <div class="feature-wrapper m-1">
              <div class="feature">
                <img src="./images/pencil.png" alt="shopping icon" style="width: 50px;">
                <h3 class="fs-4 text-body-emphasis">Content Management Systems (CMS)</h3>
                <p>Our agency develops powerful CMS platforms that empower you to easily manage and update your website's content. With intuitive interfaces and flexible functionalities, you can effortlessly create and publish engaging content.</p>
              </div>
            </div>
          </div>
          <div class="col-xxl-3 col-xl-4 col-lg-6">
            <div class="feature-wrapper m-1">
              <div class="feature">
                <img src="./images/message.png" alt="shopping icon" style="width: 50px;">
                <h3 class="fs-4 text-body-emphasis">Responsive Web Design</h3>
                <p>We prioritize responsive web design, ensuring your website looks great and functions flawlessly across all devices, including desktops, tablets, and smartphones. This approach guarantees a consistent user experience and maximizes your
                  reach to diverse audiences.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- end snippet -->

I tried to play around with heigh: 100%;
or with display: flex;
or even .h100 from bootstrap
but nothing works for me.

Thank You for you help!

Nico

It is very hard to tell that you did not provide it as in any online coding editors.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid" id="features">
  <div class="row">
    <div class="col-md-4 px-4 textw" id="cont2">
      <h3>What We Develop</h3>
      <hr id="hr-1">
      <p>Looking for a web development agency to bring your vision to life? We specialize in creating exceptional websites and applications tailored to your needs. Our experienced team ensures user-friendly, secure, and scalable results. With a proven track
        record, we'll transform your web application dreams into reality. Contact us now and let's achieve your online goals together.</p>
    </div>
    <div class="col-md-8">
      <div class="container-fluid">
        <div class="row align-content-between">
          <div class="col-6 col-md-3">
            <div class="feature-wrapper m-1">
              <div class="feature">
                <img src="./images/layers.png" alt="layers icon" style="width: 50px;">
                <h3 class="fs-4 text-body-emphasis">Custom Web Application Development</h3>
                <p>Our agency offers bespoke web application development services to cater to your specific business requirements. Whether you need a customer management system, inventory tracking solution, or a booking platform, we have you covered.</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-3">
            <div class="feature-wrapper m-1">
              <div class="feature">
                <img src="./images/online-shop.png" alt="shopping icon" style="width: 50px;">
                <h3 class="fs-4 text-body-emphasis">E-commerce Solutions</h3>
                <p>We specialize in building robust and user-friendly e-commerce websites that enable seamless online shopping experiences for your customers. From product catalog management to secure payment gateways, we ensure a secure and efficient online
                  selling platform.</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-3">
            <div class="feature-wrapper m-1">
              <div class="feature">
                <img src="./images/pencil.png" alt="shopping icon" style="width: 50px;">
                <h3 class="fs-4 text-body-emphasis">Content Management Systems (CMS)</h3>
                <p>Our agency develops powerful CMS platforms that empower you to easily manage and update your website's content. With intuitive interfaces and flexible functionalities, you can effortlessly create and publish engaging content.</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-3">
            <div class="feature-wrapper m-1">
              <div class="feature">
                <img src="./images/message.png" alt="shopping icon" style="width: 50px;">
                <h3 class="fs-4 text-body-emphasis">Responsive Web Design</h3>
                <p>We prioritize responsive web design, ensuring your website looks great and functions flawlessly across all devices, including desktops, tablets, and smartphones. This approach guarantees a consistent user experience and maximizes your
                  reach to diverse audiences.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- end snippet -->

In the updated code, I modified the column classes for the features to col-6 col-md-3. This change ensures that each box occupies an equal width of one-fourth of the container's width on small and larger screens (col-6), and one-third of the container's width on medium screens (col-md-3).

I think you need to make a few small changes to your HTML:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<div class="container-fluid" id="features">
<div class="row">
<div class="col-md-4 px-4 textw" id="cont2">
<h3>What We Develop</h3>
<hr id="hr-1">
<p>Looking for a web development agency to bring your vision to life? We specialize in creating exceptional websites and applications tailored to your needs. Our experienced team ensures user-friendly, secure, and scalable results. With a proven track record, we'll transform your web application dreams into reality. Contact us now and let's achieve your online goals together.</p>
</div>
<div class="col-md-8">
<div class="container-fluid">
<div class="row align-content-between">
<div class="col-xxl-3 col-xl-4 col-lg-6 d-flex align-items-stretch">
<div class="feature-wrapper m-1 h-100 p-1">
<div class="feature h-100">
<img src="./images/layers.png" alt="layers icon" style="width: 50px;">
<h3 class="fs-4 text-body-emphasis">Custom Web Application Development</h3>
<p>Our agency offers bespoke web application development services to cater to your specific business requirements. Whether you need a customer management system, inventory tracking solution, or a booking platform, we have you covered.</p>
</div>
</div>
</div>
<div class="col-xxl-3 col-xl-4 col-lg-6 d-flex align-items-stretch">
<div class="feature-wrapper m-1 h-100 p-1" >
<div class="feature h-100">
<img src="./images/online-shop.png" alt="shopping icon" style="width: 50px;">
<h3 class="fs-4 text-body-emphasis">E-commerce Solutions</h3>
<p>We specialize in building robust and user-friendly e-commerce websites that enable seamless online shopping experiences for your customers. From product catalog management to secure payment gateways, we ensure a secure and efficient online selling platform.</p>
</div>
</div>
</div>
<div class="col-xxl-3 col-xl-4 col-lg-6 d-flex align-items-stretch">
<div class="feature-wrapper m-1  h-100 p-1">
<div class="feature h-100">
<img src="./images/pencil.png" alt="shopping icon" style="width: 50px;">
<h3 class="fs-4 text-body-emphasis">Content Management Systems (CMS)</h3>
<p>Our agency develops powerful CMS platforms that empower you to easily manage and update your website's content. With intuitive interfaces and flexible functionalities, you can effortlessly create and publish engaging content.</p>
</div>
</div>
</div>
<div class="col-xxl-3 col-xl-4 col-lg-6 d-flex align-items-stretch">
<div class="feature-wrapper m-1 h-100 p-1">
<div class="feature h-100">
<img src="./images/message.png" alt="shopping icon" style="width: 50px;">
<h3 class="fs-4 text-body-emphasis">Responsive Web Design</h3>
<p>We prioritize responsive web design, ensuring your website looks great and functions flawlessly across all devices, including desktops, tablets, and smartphones. This approach guarantees a consistent user experience and maximizes your reach to diverse audiences.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>.com)

I just added align-items-stretch on the container. It allows each container to occupy the height of its parent (row in our case)

Subsequently I added h-100 to each child div of the container so that they also occupy the full height of their respective parent.

We also need a padding to end the whole thing with a p-1

Full code is on my codepen here

Added the h-100 class to the container-fluid element. This class sets the height of the container to 100% so that the child elements can inherit it.

Added the d-flex flex-column classes to the feature div. This applies flexbox to the feature box and sets its direction as a column, allowing the child elements to stretch vertically.

Added the align-items-stretch class to the row. This class ensures that the columns stretch vertically to match the height of the tallest column.

With these modifications, the feature boxes should have uniform height across all columns. You can adjust the styling and add additional features as needed.

 <div class="container-fluid" id="features">
<div class="row">
<div class="col-md-4 px-4 textw" id="cont2">
<h3>What We Develop</h3>
<hr id="hr-1">
<p>Looking for a web development agency to bring your vision to life? We specialize in creating exceptional websites and applications tailored to your needs. Our experienced team ensures user-friendly, secure, and scalable results. With a proven track record, we'll transform your web application dreams into reality. Contact us now and let's achieve your online goals together.</p>
</div>
<div class="col-md-8">
<div class="container-fluid h-100">
<div class="row align-items-stretch">
<div class="col-xxl-3 col-xl-4 col-lg-6">
<div class="feature-wrapper m-1">
<div class="feature d-flex flex-column">
<img src="./images/layers.png" alt="layers icon" style="width: 50px;">
<h3 class="fs-4 text-body-emphasis">Custom Web Application Development</h3>
<p>Our agency offers bespoke web application development services to cater to your specific business requirements. Whether you need a customer management system, inventory tracking solution, or a booking platform, we have you covered.</p>
</div>
</div>
</div>
<!-- Add the remaining feature columns with the same structure -->
</div>
</div>
</div>
</div>
</div>