Steps to adjust the height of columns in Bootstrap 4

Is there a way to make all columns the same height so they match each other? Below is the HTML code for 3 columns:

<div class="container">
    <div class="row">
        <div class="col-md-4 list-group">
            <a href="" class="list-group-item">asd</a>
            <a href="" class="list-group-item">asd</a>
            <a href="" class="list-group-item">asd</a>
        </div>
        <div class="col-md-4 list-group">
            <a href="" class="list-group-item">asd</a>
            <a href="" class="list-group-item">asd</a>
        </div>
        <div class="col-md-4 list-group">
            <a href="" class="list-group-item">asd</a>
        </div>
    </div>
</div>

https://i.sstatic.net/ZncTy.png

To achieve a layout like this, click here: https://i.sstatic.net/GomjB.png

javascripthtmlcssajaxbootstrap-4

Answer №1

Utilize the h-auto attribute within the col class and assign h-100 to its child elements for uniform height.

Additionally, include 

align-items:center !important; display:grid !important;
in the styling of the list-group-item class.

.list-group-item{
  align-items:center !important;
  display:grid !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
    <div class="row">
        <div class="col-4 list-group h-auto text-center">
            <a href="" class="list-group-item h-100">asd</a>
            <a href="" class="list-group-item h-100">asd</a>
            <a href="" class="list-group-item h-100">asd</a>
        </div>
        <div class="col-4 list-group h-auto text-center">
            <a href="" class="list-group-item h-100">asd</a>
            <a href="" class="list-group-item h-100">asd</a>
        </div>
        <div class="col-4 list-group h-auto text-center">
            <a href="" class="list-group-item h-100">asd</a>
        </div>
    </div>
</div>

Feel free to give it a try!

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

The variable X has been defined, but it's never actually utilized. Despite declaring it, I have not accessed its

I have encountered warnings in VSCode while using certain properties in my Angular component. The warnings state: '_id' is declared but its value is never read.ts(6133) (property) ItemEditComponent._id: number | undefined '_isModeEdit' ...

javascriptangulartypescripteslinttypescript-eslint

Angularjs scope's parent id

I'm looking to access or manipulate a scope's grandparent without making things overly complicated. Leveraging the controller as syntax, I can reference the parent controller like so: this.applicationCtrl.something with applicationCtrl > paren ...

javascriptangularjs

Take out a text field from a cell within a table

I am looking for a way to dynamically remove a textarea when the 'x' button next to it is clicked. Each 'x' button has an id that corresponds to the id of the associated textarea. For example, if I click the 'x' button under t ...

javascriptjqueryhtml

"Implementing v-model within a v-for loop in Vue.js: A step-by-step guide

Hello there, I need some assistance with a coding issue that I am facing. I am currently working on developing a post/comment/reply system similar to Facebook using vuejs. I have implemented v-for to loop through all the posts/comments/replies after fetch ...

javascriptphplaravelvue.jsv-model

Safeguard your Electron app's contents from theft

As I embark on creating an Electron app, my main concern is ensuring that the content - which consists of various mp3/png/svg files - remains exclusive to the app. It seems challenging to prevent users from accessing these files outside of the application, ...

javascriptnode.jselectron

Is there a way to automatically execute a Greasemonkey script when the page is updated using ajax?

Here is the script I am using: // ==UserScript== // @name sample // @include http://xxx* // @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js // ==/UserScript== var findElement = function(elements, text) { for (var i = 0; ...

javascripthtmlajaxgreasemonkeyuserscripts

The Firefox browser is not fully displaying the button background

Having an issue with a button that doesn't completely fill up on Firefox only. Here's the problem in action: This is how it should actually look: Not quite sure what to do. Here's the CSS styling being used: .button-panel .button { -web ...

htmlcssfirefox

Is there a way to delay loading 'div' until a few seconds after the 'body' has been fully loaded?

Is there a way to delay the appearance of the "text-container" div after the image is displayed? I have attempted to achieve this using JavaScript with the following code: <script> window.onload = function(){ var timer = setTimeout("showText()",700 ...

javascripthtmlcss

Transition the canvas video from black and white to full color

I am working with two elements - a video and a canvas. There is a function that draws the video on the canvas in grayscale when the video plays. I also have a button that is supposed to fade the canvas video from grayscale back to color. Currently, the cod ...

javascripthtmlcanvas

Keep things in line with async functions in Node JS

Hello, I am just starting out with NodeJs and I have a question. I am trying to push elements into an array called files based on the order of the urls provided, but it seems like I'm getting a random order instead. Below is the code I've been wo ...

javascriptnode.js

Display all active services in a new list item using AngularJS Ionic's ng-repeat directive

I've been working on a shopping cart feature for my Ionic app and everything is coming together nicely, except for the running itemized total. By default, the items in my array are set to active:false and when selected, they switch to active:true and ...

javascriptangularjsionic-framework

Angular version 11 fails to locate the lazy module

Here's a link to an application that is attempting to lazily load the BookModule using the following setup: const routes: Routes = [ { path: "", redirectTo: "/books", pathMatch: "full" }, { path: "books" ...

javascriptangular

What is the reason for Range.getBoundingClientRect() returning 0 for a range that is inside a textarea

When working with a <textarea> element and creating a range inside it, the following steps are taken: A new range is created using document.createRange() The only child node of the <textarea> is retrieved using textarea.childNodes[0] Range st ...

javascripthtmlcssrangegetboundingclientrect

Having trouble with Vue 3's `yarn serve` getting stuck at 42% while trying to import

Issue with Vue 3's yarn serve: It gets stuck at 42% when trying to import an external js file into main.ts. The problem lies in the following code: Main.ts import '@/assets/js/jquery.min.js'; No error is displayed, it just hangs at: 42% ...

javascripttypescriptvue.jsvuejs3

Tips on redirecting a user to a specific page after they have made a selection without doing so immediately

I am a beginner in the world of coding. Currently, I am working on creating templates for an online software application. Users will have the option to select from different choices using radio buttons. However, I want to ensure that users are not redirect ...

javascripthtml

Restrict Vue Router access to specific pages only

Once a user has logged in for the first time, they are directed to the CreateProfile page where they can enter their profile information. I want to restrict access to this page so that if the user manually types the URL into their browser (e.g. www.myproje ...

javascriptvue.jsvuejs2vuexvue-router

Checking TinyMCE to ensure it handles empty inputs properly

I find TinyMCE to be a highly effective WYSIWYG editor. The editor functions well, but I encounter an issue when trying to check if it is empty. Challenge I am in need of validating the content input in the TinyMCE textarea to ensure that something ha ...

javascriptjquerytinymce

The .load() function is not functioning properly when trying to access content

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(document).rea ...

jqueryajax

Retrieve the URI data from the response object using Axios

Currently, I'm in the process of transitioning a node project from utilizing request.js to incorporating axios.js While using the request package, extracting URI data from the response object can be achieved like so: request(req, (err, response) =&g ...

javascriptnode.jsrequestaxios

Hover over thumbnail for more information

I'm in the process of setting up our forum and have already implemented a verification system. However, I'm interested in creating a tooltip similar to the one on Facebook. When you hover over the check image, text will appear. I've tried v ...

htmlcsstooltip