What is the best way to ensure that these columns maintain a consistent height?

I have created this full-width section using Bootstrap 4. While they look fine on large screens, the column heights are not equal when I decrease the screen size. How can I ensure that all columns have equal heights even if one contains more content than the others?

Here is what I am experiencing: https://i.sstatic.net/yC3kz.jpg

I attempted to add 100% height to the services-3-box-wrapper class but it did not solve the issue. Any assistance would be greatly appreciated.

#services-3 {
    padding-top: 0px;
    padding-bottom: 0px;
}

#services-3 .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

#services-3 .service-box-1 {
    background-color: #199adb;
    padding-top: 35px;
    padding-bottom: 35px;
    padding-left: 45px;
    padding-right: 45px;
}

...
...

#services-3 .service-box-4 .sb-desc p {
    color: #ffffff;
    text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<section id="services-3">

    <div class="container-fluid">

        <div class="row no-gutters">
            <!-- Service 1 -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
                <div class="services-3-box-wrapper">
                    <div class="service-box-1">
                        <div class="sb-icon d-flex justify-content-center">
                            <i class="fas fa-user-md"></i>
                        </div>
                        <div class="sb-title">
                            <h5>Qualified Doctors</h5>
                        </div>
                        <div class="sb-desc">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
                        </div>
                    </div>
                </div>
            </div>
            ...

htmlcssbootstrap-4

Answer №1

Implement the following CSS rules to resolve the issue:

  .services-3-box-wrapper {
     height: 100%;
  }
  div[class^="service-box"]{
    height: 100%;
  }

In general, Flex child elements automatically have equal height, but for inner items, it is necessary to set the height to 100%. You were on the right track, but ensure that the background-colored div has the height property set to 100%, along with all its parent elements above it. View a working example below.

#services-3 {
    padding-top: 0px;
    padding-bottom: 0px;
}

#services-3 .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

#services-3 .service-box-1 {
    background-color: #199adb;
    padding-top: 35px;
    padding-bottom: 35px;
    padding-left: 45px;
    padding-right: 45px;
}

#services-3 .service-box-1 .sb-icon i {
    color: #ffffff;
    font-size: 40px;
}

#services-3 .service-box-1 .sb-title {
    margin-top: 20px;
}

#services-3 .service-box-1 .sb-title h5 {
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 19px;
}

#services-3 .service-box-1 .sb-desc p {
    color: #ffffff;
    text-align: center;
}


#services-3 .service-box-2 {
    background-color: #5eb8e4;
...
</div>
            <!-- Service 4 -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
                <div class="services-3-box-wrapper">
                    <div class="service-box-4">
                        <div class="sb-icon d-flex justify-content-center">
                        <i class="fas fa-user-nurse"></i>
                        </div>
                        <div class="sb-title">
                            <h5>Friendly Staff</h5>
                        </div>
                        <div class="sb-desc">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>  

    </div>

</section>

See the example provided for clarification and guidance.

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

Getting HTML Table Data with Jsoup Library

Is there a way to utilize Jsoup in order to extract specific data from this particular website in a structured manner for each individual row, such as Network Type, Battery, etc.? import org.jsoup.Jsoup; import org.jsoup.nodes.Document; import org.jsoup ...

javahtmlweb-scrapingjsoup

How to ensure an image or ad stays in a fixed position on the screen

Is there a way to keep a part of the screen fixed, regardless of what other elements are in that space? Do I need to merge code with the HTML code of the ad or image to achieve this? ...

htmlcss

Personalized cursor that blinks while utilizing window.history.replaceState

While navigating between sub-pages, I utilize the window.history.replaceState method to replace URLs in my web application. However, I have noticed that my custom cursor briefly blinks (replaced by cursor: default) when the current URL is replaced with a n ...

javascripthtmlcss

How do I make a div's height equal to 100% of the height of its parent

I am trying to make a button stick to the bottom of a card no matter how much content is on it. I used the Bootstrap class mt-auto, which worked well. However, when I set the height of all divs to 100%, the row in the card body overflows from the lg breakp ...

htmlcssstylesheightbootstrap-5

Incorporating header and footer elements into the design

I am facing an issue while editing a layout. Currently, when clicking on some side of the layout, a header and footer appear in a certain way. However, I would like to change this so that the header and footer appear differently, similar to the example s ...

htmlcss

Reloading specific content on an ASP.NET CORE Razor Pages website

Hello, I am new to Razor pages and recently integrated the AdminLTE template into my Razor Page application successfully. In the _Layout.chtml file, I inserted the sidebar menu with anchor tags that link to specific pages, as well as the header bar and fo ...

javascriptasp.net-corebootstrap-4razor-pages

Adding a Row to an HTML Table Inside a Form through JavaScript

I'm currently attempting to insert a row into a table that resides within a form using JavaScript. The strange thing is, the code functions perfectly when it's placed outside of the form tags. However, as soon as I enclose the code within the for ...

javascriptjqueryhtmlforms

Tips for adjusting the size of an image in both the vertical and horizontal axes using CSS

As a beginner in HTML, I am currently facing an issue while trying to display a set of pictures. My goal is to resize the pictures based on the current window size while maintaining the aspect ratio. Despite experimenting with various methods like using wi ...

htmlcss

How do I apply a xPage page style using the styleClass attribute instead of directly using the style attribute

Would like to know how to change the background color of an entire page using styleClass instead of directly in the xp:view tag? Here's an example that works: <xp:view xmlns:xp="http://www.ibm.com/xsp/core" style="background-color:#f1f1f1;"> ...

cssxpageslotus-notes

Tips for effectively resizing plotly charts in RMarkdown HTML reports

I'm having trouble incorporating plotly graphs created by timetk functions into my rmarkdown HTML notebook. I don't understand why these plots shrink in width in the HTML document while they look fine in the rmarkdown source editor. To adjust th ...

htmlrplotlyr-markdown

What is the best way to determine the length of an array using input from an HTML form?

Currently, I am in the process of developing a PHP file and one feature that I would like to implement is creating an array as illustrated in Example 1. As far as my understanding goes, an Array functions like a list where items can be added as shown in Ex ...

phphtmlarraysforms

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

Steps for eliminating an element using jQuery from a variable filled with HTML code

I'm developing a forum where users have the ability to quote other users' comments. When a user clicks on "quote" for a comment, it captures the HTML of that comment and displays it in a box that says Quote: Original post by a member, similar t ...

javascripthtmljquery

The shade of gray on Google Maps is distinctive

Why is my Google Maps script gray when the page loads? When I inspect the elements, it seems like it's due to resizing. Can anyone help me with this issue? Thanks in advance for any assistance. Below is the HTML code for the map which is included with ...

htmlmaps

Using jQuery, organize tables by the value of their td class

, I am attempting to organize various td elements within one or more trs based on their respective classes. These are all housed in multiple table elements with the classname "hosts". Currently, my jQuery abilities are lackluster and I am struggling to sor ...

jqueryhtmlcss

The inner div appears to have content but is actually measured as 0x0 in size

Despite having content, my main div doesn't have a height or width. I am trying to make the main div fill 100% of the space between the header and footer so that the background image for main is displayed across the entire page excluding the header an ...

csshtmllayout

Automatically focus on new page when button is clicked (in a separate HTML file)

I successfully added auto-focus functionality to a button that opens a modal using the code below: Created with AngularJS: app.directive('autoFocus', function($timeout) { return { restrict: 'AC', link: function(_sc ...

htmlangularjsautofocus

The showdown: JQUERY $(document).click versus $(document).ready

$(document).ready(function(e) { if ($('#sidebar').hasClass('active')) { $('#dismiss, .overlay').on('click', function() { $('#sidebar').removeClass('active'); $('.overlay&apo ...

jqueryhtmlcsstwitter-bootstrap

exploring the contrast of css versus javascript selectors

Could you please explain the contrast between div#name and #name? Is there a significant difference when using class or id to position an element? Thank you for your help. ...

javascriptcss

Bespoke SoundCloud music player with a sleek and minimal design, ensuring the font color remains

Just moved over from github, so please forgive the double posting. I've customized the minimal player, but I'm having trouble changing the font color of the track titles. Everything else about the font works fine, except for the color--it always ...

cssfontssoundcloud