I've utilized Bootstrap to create features in the HTML, and I'm attempting to make each box's height consistent. Check out a screenshot of the boxes here
#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;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1a3aeaeb5b2b5b3a0b181f4eff1eff3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e1c11110a0d0a0c1f0e3e4b504e504c">[email protected]</a>/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>I've experimented with setting the height to 100%, using display: flex;, and even tried .h100 from Bootstrap, but nothing seems to work for me.
Thank you for any assistance!
Nico