Bootstrap equal height columns

Hey there, I'm diving back into coding through school and was given a fun task to create a 'fake' company website to test my programming skills. I've been using bootstrap, but I'm struggling with getting the columns in my row to have equal heights.

Here's what I have so far in terms of HTML & CSS:

.dienst-kaart{
padding:15px;
min-height:100%;
}

.dienst {
 background:white;
   padding:4%;
   opacity:0.9;
   box-shadow: 5px 10px 10px #e1e0e2;
}
<div class="row">
    <div class="col-md-3 dienst-kaart">
        <div class="dienst">
            <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/Webdesign-Flevonline.png"
                alt="Web-design-Icon" width="20%">
            <h2>Web design</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut mauris auctor, volutpat dui sit amet,
                faucibus leo.</p>
        </div>
    </div>
    <div class="col-md-3 dienst-kaart">
        <div class="dienst">
            <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/Grafisch-Design-Flevonline.png"
                alt="Web-design-Icon" width="20%">
            <h2>Grafisch design</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut mauris auctor, volutpat dui sit amet,
                faucibus leo.</p>
        </div>
    </div>
    <div class="col-md-3 dienst-kaart">
        <div class="dienst">
            <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/Online-Marketing-Flevonline.png"
                alt="Web-design-Icon" width="20%">
            <h2>Online marketing</h2>
            <p>Praesent tempor nunc placerat feugiat commodo. Aliquam in velit et ipsum iaculis commodo eget in metus.
                Integer cursus, turpis.</p>
        </div>
    </div>
    <div class="col-md-3 dienst-kaart">
        <div class="dienst">
            <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/E-Commerce-Flevonline.png"
                alt="Web-design-Icon" width="20%">
            <h2>E-commerce</h2>
            <p>Praesent tempor nunc placerat feugiat commodo. Aliquam in velit et ipsum iaculis commodo eget in metus.
                Integer cursus, turpis.</p>
        </div>
    </div>
</div>

If you're familiar with the flexbox technique and can lend a hand, I would greatly appreciate it as I'm hitting a roadblock with it. Thanks in advance for any assistance!

Answer №1

The rule that should have display: flex is .dienst-kaart.

.dienst-kaart{
    display: flex;
    padding:15px;
    min-height:100%;
}

.dienst {
    background:white;
    padding:4%;
    opacity:0.9;
    box-shadow: 5px 10px 10px #e1e0e2;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
        <div class="col-md-3 dienst-kaart">
            <div class="dienst">
                <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/Webdesign-Flevonline.png" alt="Web-design-Icon" width="20%">
                <h2>Web design</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut mauris auctor, volutpat dui sit amet, faucibus leo.</p>
            </div>
        </div>
        <div class="col-md-3 dienst-kaart">
            <div class="dienst">
                <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/Grafisch-Design-Flevonline.png" alt="Web-design-Icon" width="20%">
                <h2>Grafisch design</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut mauris auctor, volutpat dui sit amet, faucibus leo.</p>
            </div>
        </div>
        <div class="col-md-3 dienst-kaart">
            <div class="dienst">
                <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/Online-Marketing-Flevonline.png" alt="Web-design-Icon" width="20%">
                <h2>Online marketing</h2>
                <p>Praesent tempor nunc placerat feugiat commodo. Aliquam in velit et ipsum iaculis commodo eget in metus. Integer cursus, turpis.</p>          </div>
            </div>
        <div class="col-md-3 dienst-kaart">
            <div class="dienst">
                <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/E-Commerce-Flevonline.png" alt="Web-design-Icon" width="20%">
                <h2>E-commerce</h2>
                <p>Praesent tempor nunc placerat feugiat commodo. Aliquam in velit et ipsum iaculis commodo eget in metus. Integer cursus, turpis.</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

Why are my styles not working when referenced from the .module.scss file?

Here is the code snippet from my Sublayout.module.scss file: .pl-6 { padding-left: 6rem !important; } .pr-6 { padding-right: 6rem !important; } .pl-12 { padding-left: 12rem !important; } .pr-12 { padding-right: 12rem !important; } After im ...

I am looking to incorporate a database field into a dropdown menu for use in a GET API request

page.ts retrieveData() { var url = 'http://hostname/databasename/.php'; var info = JSON.stringify({}); this.http.post(url, info).subscribe(response => { if (response == 0) { this.info = false; } e ...

Using a HTML value as an argument in a React component

Can someone help me figure out how to pass an HTML value as a parameter for my function? Here is the code snippet I have: <input type ="text" placeholder="Smart Contract Bytecode" name="name" id ="scbytecode" className="nice-textbox"/> <button i ...

Resizing images for retina displays in Outlook (no img attributes required)

I am currently creating templates for an automation tool and am facing an issue with resizing retina images in Outlook. I am aware that typically, one would use image attributes such as style="max-width: 100px; width: 100%" to achieve this. The issue ar ...

What level of consistency does the canvas.toBlob() method maintain across various web browsers?

Looking into converting Canvas contents to a Blob, I wanted to explore the support of the native method canvas.toBlob() across different browsers. How reliable is this method in various browser environments? Unfortunately, information about this isn't ...

The CSS selectors ::v-deep, /deep/, and >>> are functional when used locally, but appear to be malfunctioning on GitHub pages

Looking to spice up my website with a typer animation using: https://github.com/cngu/vue-typer The issue arises when the text remains black on GitHub Pages, despite applying style rules that work locally with deep selectors. Following the documentation, ...

Issues concerning the customization of error messages in forms are arising

Summing it up, upon form submission, error messages appear beneath each input field with invalid values. Utilizing Zend_Form results in the following markup: <form enctype="application/x-www-form-urlencoded" method="post" action="/auth/register">< ...

Utilizing the Primevue theme for a fresh new look

Update: Since I couldn't resolve the issue, I decided to switch back to Vue2 and opted for Vuetify instead of Primevue. I'm new to Vue and chose Vue3 for my project, which is related to my master's thesis. Due to a lack of UI libraries comp ...

JavaScript: The initial function call does not correctly switch the "boolean" in Local Storage

I'm currently developing a project that involves implementing a tutorial overlay. My goal is to have the overlay toggle on and off using a button, while also ensuring that the state of the button is remembered between page transitions so that users do ...

What is the best way to align line items containing both text and images vertically on a page?

I'm struggling with aligning the text vertically in my menu items which are created using ul and li tags. The default _layout.cshtml page is being used, but the text is aligned at the top instead of the middle. I attempted to use the vertical-align a ...

There seems to be a Javascript TypeError occurring - it looks like the function document.routeEvent

I am currently working on an old webpage that contains JavaScript. However, there is a function that does not seem to work properly with newer browsers such as Mozilla, Chrome, and Safari. Interestingly, the page functions perfectly fine on Internet Explor ...

Refresh all color pickers with Bootstrap 4 Colorpicker - enforce the update of every color selector

Currently, I am utilizing the Bootstrap 4 color picker library which can be found at this link: In my code, I have defined color pickers that look like this: <div class="input-group cpicker"> <input type="text" class="form-control input-lg" ...

What is the best way to retrieve a variable in AngularJS1 after the HTML has been divided into multiple child HTML files?

I have segmented my main HTML page into multiple subpages and included them in the main file. However, it seems that each subpage is referencing different '$scope' variables. I am trying to reference ng-modle="My-model" from one subpage to anothe ...

What is the method for obtaining the WordPress user ID?

I am looking to incorporate a Twitter follow button for all site authors on every post. Below is the structure of the Twitter button: <a href="https://twitter.com/twitterapi" class="twitter-follow-button" data-show-count="false" data-lang="en">Foll ...

Managing the Response from Google Geocode API in a Vue JS Component

I am facing an interesting challenge. I have a scenario where users can choose between two options - using their current location or entering a zip code. When a user inputs a zip code, I need to make a call to the Google geocode API to retrieve the central ...

Utilizing the change() and contains() functions with an HTML <select> element in jQuery

Currently, I am working on a feature where images change based on the value selected from a dropdown menu. The code provided below is a simplified version to convey the main idea. Here's the gist of what I have (feel free to ask any questions; please ...

Challenge with maintaining tab view data in Openui5

I am facing an issue with my application's tabs. Each tab renders data retrieved through ajax calls from the database. However, whenever I switch between tabs, the data gets refreshed each time. Is there a way to prevent this refreshing behavior and i ...

When rails code is placed within haml tags, it results in generating empty spaces within the HTML tags of browsers

Every time a rails variable is nil (or when using rails code (as seen in the third code example)), my html displays a string of empty characters. new.html.haml %h1.editable.editable_title_field{:contenteditable => 'true', :placeholder => ...

The PHP on server could not be loaded by Ajax

Trying to establish a PHP connection, encountering an error and seeking assistance. The error message displayed is as follows: { "readyState": 0, "status": 0, "statusText": "NetworkError: Failed to execute 'send' on 'XMLHttpReq ...

Tips for adding jQuery UI styling to elements generated dynamically

I have a challenge with generating text fields using jquery while applying jquery ui styling to the form. The issue is that the dynamically created elements do not inherit the css styles from jquery ui: let index = 0; $('#btn_generate').on(& ...