Are there any methods to adjust the spacing of bootstrap card grids and optimize the maximum limit?

Having a bit of an issue with my bootstrap cards in a Flask for loop. It's working fine, but every time I pass 3 cards, a new column starts and messes up the layout. Check out this screenshot for an example: https://ibb.co/jTvtSbq

Also, the vertical spacing at the bottom looks a bit off. Here's a snippet of my HTML code:

    <div class="col">
    <div class="card" id='cardPostPost'  style="width: 400px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white; bottom: -22pc; left: -18pc; ">
      <h5 class="card-header border-bottom border-light" style="color: white" >Teacher&#39;s Homework</h5>
      <div class="card-body" style="color: white" >
       <h5 class="card-title">Homework</h5>
        <p class="card-text">No </p>
       <a href="#" class="btn btn-primary">Learn More</a>
       </div>
  </div>
  </div>

    <div class="col">
    <div class="card" id='cardPostPost'  style="width: 400px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white; bottom: -22pc; left: -18pc; ">
      <h5 class="card-header border-bottom border-light" style="color: white" >SomeNewTask</h5>
      <div class="card-body" style="color: white" >
       <h5 class="card-title">Homework</h5>
        <p class="card-text">Yes </p>
       <a href="#" class="btn btn-primary">Learn More</a>
       </div>
  </div>
  </div>

    ... (additional card code here)

Can anyone offer a solution to this problem I'm facing?

htmlcssbootstrap-5

Answer №1

  1. Ensure that each card has a parent 
    <div class="col">
    .
  2. Eliminate the card 
     width: 400px; bottom: -22pc; left: -18pc;

Full code provided below -

<!DOCTYPE html>
<html lang="en>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98faf7f7ecebeceaf9e8d8adb6aab6ab">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f7959898838483859687b7c2d9c5d9c4">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7L+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
        crossorigin="anonymous"></script>

</head>

<body>
    <div class="container">
        <div class="row row-cols-auto g-4">
            <div class="col">
                <div class="card" id='cardPostPost'
                    style=" border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
                    <h5 class="card-header border-bottom border-light" style="color: white">Teacher&#39;s Homework</h5>
                    <div class="card-body" style="color: white">
                        <h5 class="card-title">Homework</h5>
                        <p class="card-text">No </p>
                        <a href="#" class="btn btn-primary">Learn More</a>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card" id='cardPostPost'
                    style=" border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
                    <h5 class="card-header border-bottom border-light" style="color: white">SomeNewTask</h5>
                    <div class="card-body" style="color: white">
                        <h5 class="card-title">Homework</h5>
                        <p class="card-text">Yes </p>
                        <a href="#" class="btn btn-primary">Learn More</a>
                    </div>
                </div>
                ...repeat the card code as needed...
            </div>

        </div>
    </div>
</body>

</html>

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

Tips for showcasing a webcam in a compact space while maintaining high image quality

Currently, I am trying to showcase my webcam feed using an html5 video tag in the following way: <video id="myWebCamVideo" muted autoplay></video> The webcam resolution is set at 1920x1080px. My goal is to present it as shown below: <div ...

htmlvideobootstrap-4size

Change the type of field from a div to an input when clicked

I'm trying to achieve something unique with a div on my webpage. When the user clicks on it, I want the div to transform into an input field. Initially, the div looks like this: <div>This is the content.</div> But when clicked, I want i ...

htmlangularjs

Please tap to dial: Access to navigation is restricted

Trying to add a click-to-call link with the following code: <a href="tel:+4912345678912">Tel: +4912345678912</a> Despite Google developers saying it should work, major mobile browsers are blocking the navigation when clicking on the link. It ...

javascripthtmlbrowsertel

What could have caused this issue to appear when I tried running ng build --prod?

Issue encountered while trying to build the ng2-pdf-viewer module: An error occurred in the webpack loader (from @angular-devkit/build-optimizer) with the message: TypeError: Cannot read property 'kind' of undefined. This error is related to A ...

htmlangulartypescriptconsolepdf-viewer

How does the browser interpret the CSS property transform: none?

Does the transform: none result in matrix(1,0,0,1,0,0) or a different outcome? I am looking to reset the transform; what is the best approach for this? <style> .box{ height: 100px; width: 100px; background-color: red; transition: 0.5s; transform: ...

htmlcsstransform

A HTML List with Five Columns

Why isn't the CSS code filling up 100% of the screen? I have 5 columns with a width of 20% floating left. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset= ...

htmlcsshtml-lists

Is there a way to show escaped html code on the blog editing page?

After developing a Content Management System (CMS), I encountered an issue with code formatting in my blog posts. <pre> <code> &lt;input type=&quot;color&quot; name=&quot;favcolor&quot; /&gt; </code> < ...

phphtmlmysql

Having trouble with the jQuery each function's functionality

I am creating circular counters for surveys by generating a counter for each answer option. Currently, I am utilizing this "plugin": Issue: The problem lies in the plugin not fetching the text value from the <div> element and failing to draw coun ...

javascriptjqueryhtmlcss

Using media queries in VueJS style tags may not have the desired effect

I've encountered an issue with using @media in the style tags of a VueJS component. Surprisingly, styling within the @media query works consistently, while applying styles based on width rules does not seem to have any effect. <template> &l ...

cssvue.jsmedia-queries

Styling certain UL and LI elements with CSS properties

Greetings everyone! I constantly struggle when it comes to making my CSS cooperate. I have some code that involves using ul and li tags. However, I only want to apply that styling to specific sections of my HTML code rather than all instances of the ul and ...

htmlcsscss-selectors

Troubleshooting Angular MIME problems with Microsoft Edge

I'm encountering a problem with Angular where after running ng serve and deploying on localhost, the page loads without any issues. However, when I use ng build and deploy remotely, I encounter a MIME error. Failed to load module script: Expected a ...

javascripthtmlangulartypescriptwebstorm

The expected response from CSS3 animated images may not be fully realized

I've been working on this project with 4 images. While hovering over one image causes the others to change size as intended, I can't figure out why the ones on the left are not following the same pattern even though I have specified that they sho ...

htmlcsshovertransformscale

Creating an atom without any boundaries: A step-by-step guide

While browsing the Atom forum, I stumbled upon a post discussing scripts for enhancing the UI of Atom. I'm curious about where to place these scripts. Should they go in the Atom init script? Any guidance would be highly valued. Visit this link for m ...

csssassatom-editor

Is there a way to store the form data as a text file using jQuery or JavaScript and sending it to a PHP file?

I have created a basic html form with pre-filled information for demonstration purposes. Currently, when the form is submitted, it is saved to Google Docs successfully. However, I also want to save the form output to a text file on the server where the p ...

javascriptphpjqueryhtml

Ways to eliminate additional whitespace in CSS Grid styling techniques

Currently, I am utilizing material ui to establish a grid system for showcasing videos in 2 rows. While I have successfully set up the general layout, I am facing difficulty in eliminating the white space/padding between the elements. Despite trying nowrap ...

cssreactjsmaterial-ui

Load a distinct JSP file from the sidebar in JSP

I have an index.jsp file containing a sidebar: <div id="sidebar"> <li ><a href="create">Create</a></li> <li ><a href="view">View</a></li> <li ><a href="Delete">Delete</a></li> & ...

jqueryhtmljsp

Swap Text Inside String - JS

I have a challenge where I need to extract an ID from an HTML element and then replace part of the extracted word. For instance: HTML <input type="checkbox" id="facebookCheckbox"></div> JavaScript var x = document.getElementById("facebookCh ...

javascripthtmlcssreplace

Issues with Bootstrap 5 navbar-light and font style rendering on Edge browser

My website seems to be having compatibility issues with Microsoft Edge. While everything works fine on Chrome, the navbar classes "navbar-light" and "bg-light" do not apply properly in Edge, and the font style defaults. I am using Bootstrap 5 and webfonts ...

htmlcsstwitter-bootstrapmicrosoft-edgebootstrap-5

Concealing information based on the value of a variable

Creating a dynamic price estimator. I need help writing a jQuery function that can hide or show a specific div element based on the value of a variable. For example, let's say I have an HTML div with the ID 'Answer': <div id="answer"&g ...

javascriptjquerycsshideshow-hide

Chrome's rendering of CSS flex display shows variations with identical flex items

I am facing an issue with my flex items where some of them are displaying incorrectly in Chrome but fine in Firefox. The problem seems to be with the margin-right of the rectangle span within each flex item, along with the scaling of the text span due to f ...

javascripthtmlcsslayoutflexbox