Eliminate any unnecessary gaps that may exist between the cards within the deck

Utilizing Jinja2 with Flask to render a list on an HTML page, I aim to produce card decks containing data from the list using a Jinja2 loop.

This is my current HTML code:

<div class="container-fluid">
    <div class="row">
       <div class="card-deck">
            {% for l in list %}
            <div class="col-sm-4">
                <div class="card">
                     <div class="card-body">
                            {{ l[0] }}
                            {{ l[4] }}
                     </div>
                </div>
            </div>
         {% endfor %}
       </div>
   </div>
</div>

The displayed outcome can be seen .

I would like to eliminate the unnecessary red spaces as shown in the image .

Any suggestions on how I could achieve this?

Many thanks!

htmlcsstwitter-bootstrapjinja2

Answer №1

Resolved by utilizing the following instance: https://www.bootply.com/118335

referenced from this inquiry: Is it possible to create a pinterest-like layout with Bootstrap only?

Revised code:

HTML:

<div class="container-fluid">
     <div class="row" id="row_posts">
        {% for l in list %}
        <div class="col-sm-4" id="col_posts">
            <div class="card" id="card_posts">
                 <div class="card-body">
                        {{ l[0] }}
                        {{ l[4] }}
                 </div>
            </div>
        </div>
     {% endfor %}
    </div>
</div>

CSS:

*, *:before, *:after {box-sizing:  border-box !important;}

#row_posts {
-moz-column-width: 22em;
-webkit-column-width: 22em;
-moz-column-gap: 1em;
-webkit-column-gap:1em; 
 }

#col_posts {
display: inline-block;
padding:  .25rem;
width:  100%; 
}

#card_posts {
position:relative;
display: block;
}

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

Can a fixed div be made to adapt to different screen sizes?

Struggling to make SVG data charts responsive due to the 'position:fixed' CSS attribute applied, I'm exploring alternative solutions that don't involve media queries. Ideally, I want the SVG to scale up and down while remaining centered ...

htmlcsssvg

Only the first cell is affected by the background color setting

... <th style='background-color:#cccccc;font-weight:bold'><td></td><td>Address</td><td>Last Name</td><td>First Name</td><td>ZIP Code</td><td>City</td></th> ...

htmlcss

The Angular HTML Autocomplete feature is not functioning as intended when hosted on a CDN in Chrome, despite setting it to "nope" or "off"

When setting Autocomplete to "nope" or "off" in my input box for surname, I'm still able to select from the autocomplete list. This issue occurs when accessing our Ui app through CDN at link [https:// Xyz. net], but works correctly when accessing it d ...

angularjsangularhtml

What could be causing Html.checkboxfor to fail in updating the boolean value of the model?

I am currently working on a project where customers can select multiple users to remove them from the database. The issue I'm facing is that the checkboxes are not changing or sending the isSelected variable, which tells the server which users should ...

c#htmlasp.netmodel-view-controller

Guide on triggering a function with the Enter key in Angular 9

A button on my Angular component currently triggers a method with a (click) event, but I also want the same method to be triggered if the user presses the enter key in the input box. This gives the user flexibility. Below is the HTML code for the input an ...

htmlangular

Tips on creating a "CSS3 blink animation" using the visibility attribute

I'm attempting to create an old-school blink effect on some DIVs. They should start off as invisible and then quickly become visible for a moment, repeating this sequence in an infinite loop. According to CSS specifications, the "visible" property is ...

cssvisibilitycss-animationskeyframe

I am eager to design a form input field within the vuetify framework

I'm having trouble creating a text field in Vuetify where the button and height are not behaving as expected. I've attempted to adjust the height multiple times without success. Although I have the necessary CSS, integrating it into Vuetify has ...

cssvue.jsnuxt.jsvuetify.js

A guide on using jQuery to cycle through every row of every table on an HTML page

I am trying to figure out the correct syntax for nesting two loops within each other in jQuery. The first loop should iterate over each table in an HTML page that does not have any IDs or classes, while the second loop should go through each table row of t ...

jqueryhtmlcss

What sets npm install apart from manual installation?

I've been exploring requirejs recently. I'm trying to decide between installing it using npm install requirejs or manually downloading it from the website. Are there any differences between the two methods? Are there any advantages or disadvantag ...

javascripthtmlnpminstallationrequirejs

Instructions for adding transitions to an entire page in material-ui while maintaining a fixed AppBar

Is there a way to ensure that the material-ui AppBar remains fixed at the top while being wrapped with page contents in a transition? I want the AppBar to transition (e.g. Zoom or Slide) along with the rest of the page contents. I encountered this issue w ...

javascriptcssreactjsmaterial-ui

Hover-activated dropdown menu

After reading numerous tutorials and spending hours trying to create a submenu on hover, I still can't seem to get it to work. My goal is to display "Zimmer", "Reservierung", and "Preise" in a vertical menu when hovering over "Hotel," and so on. Here ...

htmlcssnavigationsubmenu

When HTML/JS code is utilized, the submit button or image should function to open the same page as

In addition to the left and right mouse buttons, you also have a middle mouse button. If you click on an image or hyperlink with this middle mouse button while browsing any website, it will open a new window in the background. Now, I want to achieve a sim ...

javascripthtmlformssubmit

Intermittent Z-index conflicts in need of a solution - seeking guidance

Is there a way to make the h1 heading and img image elements appear on top of the opaque div they are enclosed in? I want them to look unaffected by the transparency of their parent div. Here is a Fiddle demonstrating my issue: <div id="main"> ...

htmlcsslayout

Struggling to implement a Rock Paper Scissors game using HTML, CSS Bootstrap4, and JavaScript, specifically facing challenges in getting the function to select a new image

Recently, in my coding class, we were tasked with creating a program that would display images of dice and generate random numbers when the refresh button was clicked. To practice using querySelector and setAttribute, I decided to expand on the lesson by i ...

javascriptcsshtmlbootstrap-4

Angular.js fails to load successfully every other time

My angular application is running into some issues with bower. At times, when I start up the server, I encounter the following error: Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:modulerr] Failed to in ...

javascriptjquerynode.jsangularjstwitter-bootstrap

Do not show empty pages in Mpdf display

I utilized Mpdf to generate a three-page PDF document. The first and third pages consistently contain data, but the presence of data on the second page varies. I prefer not to display the second page if it is empty. Here's the code structure: html = ...

phphtmlmpdf

I want to initiate a Python script by clicking a button on my HTML page with the help of Ajax

Here is my JavaScript code: function executePython() { alert("executed"); $.ajax({ url: "http://localhost:5000/app.py", type: "POST", ...

javascriptpythonhtmlajax

What is the best way to apply the "active" class to a Bootstrap modal image that is sourced from a database

I have a gallery of thumbnails that are fetched from a database. When you click on a thumbnail, it opens in a modal window. I want to enhance this setup by adding a carousel feature so users can slide through the gallery images. The issue I'm facing i ...

phpjquerytwitter-bootstrapcarousel

Conceal the information beneath a see-through fixed navigation bar when scrolling downward

the issue: I am facing a challenge with my transparent fixed navbar that has a margin-top gap. The content below the navbar needs to be positioned under it while scrolling down, but the background of the page is a dynamic slideshow of various images. This ...

javascriptjqueryhtmlcsstwitter-bootstrap

Identifying whether a Alphabet or a Digit has been Pressed - JavaScript

I understand that it is possible to detect if a key has been pressed and identify which key was pressed using JavaScript. In order to check if a key is down or pressed, jQuery can be utilized with ease: $( "#some id" ).keydown(function() or $( "#m" ). ...

javascriptjqueryhtmlkeypresskeydown