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 https://i.sstatic.net/Xr6LR.png.

I would like to eliminate the unnecessary red spaces as shown in the image https://i.sstatic.net/1dRCS.png.

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

Ways to call a DIV element in a PHP file from a different PHP file

I am facing an issue with referring to a specific <div> element from one .php page to another. The current code is redirecting me to the home page of the first page, instead of displaying the desired content. Can anyone provide guidance on how to ach ...

javascriptphphtml

The standard bootstrap navbar does not automatically create spacing for content below it

Hey there everyone, I’m facing an issue with my responsive bootstrap menu. When I click the toggle button to open the dropdown menu, it doesn’t push the other content down like it should. Instead, it just overlaps the content. I’ve been trying to sol ...

htmlcsstwitter-bootstrapdrop-down-menunavigation

Stylish Material Design Icons

Our website utilizes CSS classes to display icons across various pages. .alert { /* used for "alert" type messages */ background: url(images/alerts.png) no-repeat left top; padding: 5px 0 15px 35px; margin: 0; } Use: <p id="ctl00_ctl00_ContentMessagePa ...

cssmaterial-ui

Load media upon the click of an image

I'm currently in the process of designing a team page for our website. Each team member's photo is displayed in a grid layout, with two boxes positioned below containing various content. Box 1: This box consists of basic text information. Box 2: ...

javascriptjqueryhtml

The height of the Material UI Paper component is not appropriately matched with the parent component

I am currently working with the Paper component that contains a Card component, and I am trying to make its height fill the entire screen. To simplify the problem, I have provided the following code: import React from "react"; import { makeStyles ...

javascriptcssreactjsmaterial-ui

What is the process for invoking a websocket from an HTML client?

I have created a WCF Service using netHttpBinding binding and it is hosted on IIS 8 (Windows Server 2012). The interfaces for the service are as follows: [ServiceContract(CallbackContract = typeof(IDuplexCallbackContract))] public interface IHelloWebSocke ...

javascripthtmlwcfwebsocket

Is there a way to dynamically update one input field while another input field is being modified? [HTML / JS]

I have a form with 3 input fields. One of the inputs is disabled, while the other two are enabled. The goal is to combine the values entered in the enabled fields to populate the disabled field. How can this be achieved? Is it possible for the value in th ...

javascripthtmljquerycss

What is the best way to close a popup window?

Is there a way to close my popup? function hidePopup(){ document.getElementById("popup-1").classList.remove("active"); } @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap'); .popup .overlay{ positio ...

javascripthtmlcss

Learn the method to display a particular post using its unique post ID

I need some help displaying two specific posts by utilizing their post IDs. I'm struggling with the code to retrieve and call these post IDs. Can someone assist me? /////////////////////////////// ////////////////////////////// <div class="foo ...

phphtmlwordpresspostcustom-post-type

Is it possible to place a div and a heading side by side within the same line?

Is there a way to align a div and header on the same line? Currently, the red div is displaying below the text. Thank you for your help! .underlined { border-bottom: 1px dotted #000; text-decoration:none; } .block { height:15px; background-color: #ff505 ...

htmlcss

A step-by-step guide on utilizing links for downloading PDF files in Vue/Nuxt

Having some trouble opening a PDF tab in my Vue application with NUXT and Vuetify... any suggestions? I attempted to use: <a href="../static/docs/filename.pdf" target="_blank">Download PDF</a> I also tried using <nuxt-link> but it didn ...

javascripthtmlvue.jsvuetify.jsnuxt.js

The content inside the bootstrap modal is not visible

My goal is to trigger a modal window when a specific div is clicked using bootstrap modal. However, upon clicking the div, the screen darkens but the modal body fails to appear. Code: <html> <head> <title></title> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Comparison of valueChanges between ReactiveForms in the dom and component级主动形

Is there a method to determine if the change in valueChanges for a FormControl was initiated by the dom or the component itself? I have a scenario where I need to execute stuff() when the user modifies the value, but I want to avoid executing it if the v ...

javascripthtmlangulartypescriptangular-reactive-forms

Make the background image within a button stretch to completely cover the button

I need assistance with creating a button that has a large image as its background. The challenge I'm facing is that the image fits vertically within the button, but horizontally it repeats unless I use 'no-repeat', which leaves empty space i ...

htmlcss

Code snippet for adding a div element with an embedded image using JavaScript

I am attempting to create a function that generates three div elements, each containing an image, and then appends them to the body using a for loop. As a beginner in JavaScript, I am struggling with this task. Can anyone please provide guidance on what ...

javascripthtmlfunction

The functionality of "Body Onload" for sending "ScrollHeight" is malfunctioning in Chrome and Safari

I came across an issue where the iframe_resize function in my code was not working as expected. After investigating further, I realized that the problem did not lie with the function itself. So, I decided to post a new question. Within my index.html file ...

phpjavascripthtmlcssbrowser

One of the unique CSS properties found in the NextJS setup is the default 'zoom' property set to

Even though I already found a solution to the problem, I can't help but wonder what the author meant by it. Hopefully, my solution can help others who may encounter the same issue. After installing the latest NextJS version 13.2.4 on my computer, I e ...

cssreactjsnext.js

Two flexible-sized containers placed side by side, with an ellipsis displayed on the left container

Can you achieve a layout where two elements are inside a container and float side-by-side? The right element should adjust its size based on the content while the left element fills the remaining space in the container with an ellipsis to truncate overflow ...

htmlcssdynamicellipsis

Adjusting the width of Django crispy forms prepend box

I am currently using crispy forms to build a django form that consists of multiple rows. The issue I'm facing is with the default behavior of the prepend box, as it adjusts its width to match the text inside it. This ends up looking disorganized when ...

djangotwitter-bootstrapbootstrap-5django-crispy-forms

How can we align images above one another in a responsive manner using Bootstrap 3?

Looking for assistance with aligning and overlapping images on top of another image in Bootstrap while maintaining responsiveness. I've attempted the following: HTML: <div class="container"> <div class="row"> <div class="col-lg-12"> ...

csstwitter-bootstrap