I’ve created features in the html using Bootstrap. I’m trying to unisize each box height wise.
ScreenShot of the boxes
#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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 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
3
Answers
It is very hard to tell that you did not provide it as in any online coding editors.
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:
I just added
align-items-stretchon 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-1Full 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.