Getting rid of the empty spaces between the lines of cards in Bootstrap 4

I want to eliminate the vertical space between the cards in my layout. Essentially, I want the cards to maximize the available space. I am open to using a plugin if necessary, but I have not been able to find any relevant information online (maybe I used the wrong keywords in my search).

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

                        <div class="row">
                            <div class="col-4">
                                <div class="card mb-4">
                                    <div class="card-body">
                                        <h1>Lorem</h1>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="card mb-4">
                                    <div class="card-body">
                                        <h1>Lorem<br>ipsum</h1>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="card mb-4">
                                    <div class="card-body">
                                        <h1>Lorem<br>ipsum<br>dolor<br>sit<br>met<br>a</h1>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="card mb-4">
                                    <div class="card-body">
                                        <h1>hello</h1>
                                    </div>
                                </div>
                            </div>
                        </div>

Check out the screenshot illustrating the desired layout

javascripthtmlcssbootstrap-4

Answer №1

In the past, there was a significant issue with earlier versions of bootstrap where we had to set a min-height for all cards in order to make them align somewhat.

However, using CSS grid has made things much simpler. CSS grid has revolutionized layouts, allowing us to create designs quickly without dealing with complex framework problems.

Check out this example on JSFiddle

<style>
    .parent{
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 1rem;
        background: #f7f7f7
    }
    .parent .card{
        background: #fff;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
        padding: 0 1rem; box-sizing: border-box;
    }
    @media only screen and (min-width: 600px) {
        .parent{grid-template-columns: 1fr 1fr;}
    }
    @media only screen and (min-width: 900px) {
        .parent{grid-template-columns: 1fr 1fr 1fr;}
    }
    @media only screen and (min-width: 1200px) {
        .parent{grid-template-columns: 1fr 1fr 1fr 1fr;}
    }
</style>
<div class="parent">
    <div class="card">
        <h3>Title 1</h3>
        <p>
        Lorem ipsum dolor sit amet, consectetur elit. 
        Proin a imperdiet sapien. Aliquam at massa nec 
        nisi facilisis ullamcorper mattis et lacus. 
        Morbi aliquam ac nisi et posuere. Mauris dictum 
        tortor id magna convallis pulvinar.
        </p>
    </div>
    <div class="card">
        <h3>Title 1</h3>
        <p>
        Lorem ipsum dolor sit amet, consectetur elit. 
        Proin a imperdiet sapien. Aliquam at massa nec 
        nisi facilisis ullamcorper mattis et lacus. 
        Morbi aliquam ac nisi et posuere. Mauris dictum 
        tortor id magna convallis pulvinar.
        </p>
    </div>
    <div class="card">
        <h3>Title 1</h3>
        <p>
        Lorem ipsum dolor sit amet, consectetur elit. 
        Proin a imperdiet sapien. Aliquam at massa nec 
        nisi facilisis ullamcorper mattis et lacus. 
        Morbi aliquam ac nisi et posuere. Mauris dictum 
        tortor id magna convallis pulvinar.
        </p>
    </div>
    <div class="card">
        <h3>Title 1</h3>
        <p>
        Lorem ipsum dolor sit amet, consectetur elit. 
        Proin a imperdiet sapien. Aliquam at massa nec 
        nisi facilisis ullamcorper mattis et lacus. 
        Morbi aliquam ac nisi et posuere. Mauris dictum 
        tortor id magna convallis pulvinar.
        </p>
    </div>
</div>

I'm uncertain if bootstrap 4 has resolved this issue, as I have not yet received any updates regarding it.

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

Pass on the error to the callback in Node.js

Here is the code snippet in question: User.findById(id, function(err, user) { //blah blah }); The findById method can be found within the User module. Here's a glimpse at its implementation: exports.findById = function(id,callback) { connec ...

javascriptnode.js

Utilizing MUI alongside Tailwind CSS in conjunction with NextJS: Here's a solution for resolving the transparent button issue without compromising the utilization of Tailwind CSS preflight

Currently working on a project built on top of a NextJS template using TailwindCSS. Struggling to integrate MUI components due to unexpected behavior with the button element (White Button error in NextJS Project). While I am aware of solutions suggesting ...

cssreactjsnext.jsmaterial-uitailwind-css

Can you explain the purpose of the text-align property set to justify-all?

Can you explain what the CSS property text-align: justify-all does? According to MDN, it should justify even the content of the last line. However, I am not seeing any changes in my Chrome browser: <p style="text-align: justify-all"> one two thre ...

htmlcssw3c

Vue 3's defineExpose feature does not allow for the exposure of child methods or properties

I have a main component and subcomponent set up as shown below: Main Component : <script setup> import SubComp from '@/components/SubComp.vue' import { ref, computed } from 'vue' const subComp = ref(null) const handleClick = () ...

javascriptvue.jsvuejs3vue-sfc

Developing a MEAN application with simultaneous servers running Express, NodeJS, and Angular 2

Currently, I am trying to establish a connection between my backend (NodeJS, Express) and frontend (Angular 2), but I am facing a hurdle in the process. When I run both servers separately, the client-side and server-side functionalities work correctly. In ...

javascriptnode.jsangularexpressmean-stack

What is the process for sending an image as input to a Django view using an Angular frontend?

I currently have a django web api with an angular frontend that allows users to upload and view images. My goal now is to expand this functionality: when the user clicks the "segment" button (see image), it should send the corresponding image to my python ...

javascriptpythonangularjsdjango

Utilizing an Empty Array within an AngularJS Controller Function Invoked by a Directive

I have encountered a tricky issue that appears to be simple, but I am struggling to find a solution. Currently, I am developing a to-do list application using Angular and Angular-Material. The main part of the application is located in a file named main. ...

javascriptangularjsangularjs-directiveangularjs-scopeangular-material

The unexpected syntax error, indicated by an ampersand followed by a quotation mark, was encountered in [location] on line 7

Every time I try to run my code, I encounter the following error message: Parse error: syntax error, unexpected '"' in D:\server\WT-NMP\WWW\myproj1\insert.php on line 7 This is the code that is triggering the error: &l ...

phphtmlmysql

How about a CSS grid featuring squares with square images?

Just like the inquiry found on this page, I am striving to construct a grid of perfect squares, each containing an image with 100% height. The issue arises from utilizing the padding-bottom: 100%; height: 0 method, which prevents height: 100% from functio ...

htmlcsscss-grid

Issue with SVG mask not functioning when transform is applied

I am struggling to apply a mask to a transformed SVG element. When I try to do this with a path, the structure is the same. If I apply the mask to an element outside of the transformed group, it works as expected. However, if I try to do the same inside, t ...

csssvgmask

Is there a way to include e.preventDefault() within an ajax call?

After the user clicks the submit button on my form, the handleSubmit function is triggered. However, I am having trouble calling e.preventDefault() inside my AJAX call due to its asynchronous nature. How can this issue be resolved? class FormRegister ex ...

javascriptajaxreactjs

The Navigation Bar in Vue Component Renders Incorrectly due to Bootstrap Integration

I am facing an issue with my Bootstrap navbar not displaying correctly within my Vue component. It is appearing as a stacked greyed out button, almost like it's assuming it's on a small device. https://i.sstatic.net/yoPvO.png You can find the c ...

htmlcsstwitter-bootstrapvue.js

What is the best way to conceal a canvas or another item?

Within my main canvas, there are three smaller canvases and a text element. <canvas id="Background" width="350" height="300" style="border:6px solid black; position: absolute; left: 10px; top: 10px;"> </canvas> <canvas id="Canvas1" width ...

javascripthtmlcsscanvas

Tips for increasing the number of inputs within a form using <script> elements

I am currently working on a form within the script tags and I would like to include additional input fields before submitting. However, the submit button seems to be malfunctioning and I suspect that there may be an issue with how I am accessing it in my c ...

javascriptjqueryhtmlforms

Can you suggest an efficient method for routing with EJS templates on an Express server without constantly repeating code?

Assuming my app consists of two views: index.ejs and profile/index.ejs, I aim to set up routing using express code as shown below. /* GET home page. */ router.get('/', function (req, res, next) { res.render('index'); }); /* GET pr ...

javascriptnode.jstwitter-bootstrapexpressejs

"Resolving an inconsistency problem with the Vary header in Htaccess

Could someone help me identify the issues in my htaccess code? I'm encountering errors: This response is negotiated, but doesn't have an appropriate Vary header. The resource doesn't send Vary consistently. ## add vary header <IfModule ...

css.htaccessheadergzipvary

The logo positioned on the left with menu links perfectly centered

Looking for Help with Navigation Layout Greetings. I am encountering some challenges while trying to code the navigation layout depicted in the image (linked above). My goal is to have the logo, which is an image, aligned on the left side and the menu lin ...

cssmenunavigationnavbarnav

Is there a way to display .form-check-inline buttons on a different line than their corresponding label?

I'm trying to create a form with radio buttons and using Bootstrap 4 to align them horizontally with the .form-check-inline class. However, this causes the input labels to be on the same line as the buttons: <html> <head> <link ...

htmlcssformsbootstrap-4

Searching for values within an array using the ".includes" method

I'm curious if there's a method to determine if a string contains any characters that are also present in an array? const array = ["cake", "hello", "ok"]; const string = "hello"; let result = string.include ...

javascriptarrays

Exploring the concept of overflow and minmax behavior in CSS grid

Summary: Example of overflow in nested grid layout on Codepen, and attempts to fix it using CSS grid-template-columns: repeat(16, minmax(0,1fr)); Within the element called container, there are two main elements - summary-wrapper and stats-wrapper The gri ...

htmlcsscss-grid