Issues with the responsiveness of Bootstrap 4.5.0 grid system

While following a Django tutorial, I encountered an issue with Bootstrap cards and CSS styling. Using the latest version (Bootstrap 4.5.0), I noticed that my responsive grid was causing the cards to overlap as I increased the screen size. Comparing it to the tutorial which used Bootstrap 4.1, changing the href link in the base.html file resolved the problem (even though the code in index.html remained the same).

I then compared both versions on the browser and discovered that disabling the min-width: 0 for the class="col" fixed the issue in the 4.5.0 version of the link. By downloading the 4.5 CSS, adding it to the project files, and removing the min-width style, everything worked perfectly.

Now, the question arises: Was I using it incorrectly in the index.html or is this some sort of bug? (This problem occurred on both Opera 68.0.3618.125 and Chrome 83.0.4103.97)

The version that worked without any issues:

index.html:

{% extends 'base.html' %}

{% block content %}
<h1>Products</h1>
<div class="row">
    {% for product in products %}
        <div class="col">
            <div class="card" style="width: 18rem;">
              <img class="card-img-top" src="{{ product.image_url }}" alt="Card image cap">
              <div class="card-body">
                <h5 class="card-title">{{ product.name }}</h5>
                <p class="card-text">${{ product.price }}</p>
                <a href="#" class="btn btn-primary">Add to Cart</a>
              </div>
            </div>
        </div>
    {% endfor %}
</div>
{% endblock %}

base.html

<html lang="en">
     <head>
     <!-- Required meta tags -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

     <!-- Bootstrap CSS -->
      <link rel="stylesheet" 
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384- 
      9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    </head>

    <body>
      <div class="container">
         {% block content %}
         {% endblock %}
      </div>
    </body>
  </html>

Answer №1

The issue doesn't lie with the .col class itself, but actually with the inline styling that is being applied to each individual .card component. Without a modifier (like .col-sm-2), the .col class tries to fit all elements within the width of a single .row, regardless of the number of columns specified.

By adding inline widths to the .card elements, you end up overriding the intended behavior of the .col class.

A simple solution would be to make use of Bootstrap's predefined column modifiers and remove any inline styles. Below is an example structure:

<div class="col-6 col-sm-4 col-md-3">
  <div class="card">
   <img class="card-img-top" src="{{ product.image_url }}" alt="Card image cap">
    <div class="card-body">
     <h5 class="card-title">{{ product.name }}</h5>
     <p class="card-text">${{ product.price }}</p>
     <a href="#" class="btn btn-primary">Add to Cart</a>
    </div>
   </div>
</div>

In this scenario, Bootstrap's grid system behaves as follows:

  • At the smallest breakpoint, each column takes up half of the container's width.
  • At the SM breakpoint, each column occupies one-third of the container's width.
  • At the MD breakpoint and beyond, each column spans a quarter of the container's width.

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

Adjusting CSS Div Blocks for Different Screen Sizes

I am currently working on designing a page layout that includes two sidebars and a main article area. My goal is to have the sidebars stack vertically beside the main area when viewed on a tablet or phone, with both eventually moving below it. However, I a ...

Table featuring identical submit buttons in each row: initial submit button is nonfunctional (potential issue with multiple identical IDs)

My table displays product files, with the option to add notes. If a note is added, it shows in a row. If not, a text area field with a submit button appears instead. Everything seems to be working well, except for the first row without a note. After addin ...

Transferring Live Information Between Two Controllers

How can I transfer the 'header' and 'content' from a controller's $scope element (specifically the 'header' and 'content') to another page that is redirected to upon clicking a button? The current setup involve ...

What is the best way to show an element when hovering over another element?

I'm looking for a CSS-only solution (NO JQuery) to display a FontAwsome icon (<i class='fas fa-arrow-alt-circle-left fa-lg arrowbounce text-success hidearrowbounce'></i>) only when hovering over another element. However, despite ...

Unable to show the company logo in the navigation bar

Working on a pizza site and encountering an issue - trying to add the logo of the place to the navbar (which also links to the main page) but it's not displaying. Using Twitter Bootstrap for this project. Here is the code snippet: /*#557c3e green*/ ...

My Tailwind CSS toggle button disappears in dark mode, why is that happening?

<button aria-label="Toggle Dark Mode" type="button" className="lg:inline-flex lg:w-40 md:w-screen p-3 h-12 w-12 order-2 md:order-3" onClick={() => setTheme(theme === 'dark' ? &ap ...

Leverage the power of the General Sibling Selector to easily traverse through deeply nested elements in your

Hi there, I have a query regarding the General Sibling Selector. Let's start by looking at the HTML: <div id="layout-middle"> <div id="Center"> <a class="col Picture1">Title1</a> <a class="col Picture2">Title2< ...

Tips for maintaining tab state using Angular Material

In my Angular 8 application with Angular Material, I have implemented four tabs where each tab allows editing. However, when going back from the edit mode to the tabs, I want the last selected tab to remain selected. My approach so far is as follows: exp ...

What is a way to leverage the array or object data within the method object in order to reference the specific link in VUEJS?

How do I utilize the "LINK" property in the methods object? You might be able to infer my intentions, but just in case, here's what I'm aiming for: In Vue.js, I am attempting to extract all the data from the Data method's object so that I ...

How to Customize the Drawer Color in Material-UI v5

I'm currently using MUI v5 in my project and I am encountering some challenges while attempting to style a Drawer component with a black background color. As this update is relatively new, I have not been able to find much information on customizing t ...

The Page Transcends the Boundaries of the HTML Tag

This particular issue sets itself apart from the common overflow problems that are often faced by people. Interestingly, I have only encountered this problem while using Chrome (Version 41.0.2272.101 64-bit). IE 9+ and Firefox, on the other hand, seem to b ...

Troubleshooting CSRF and CORS issues during local development of a website using webpacked Vue.js/React.js/Angular.js with a

Is it possible to run a vuejs application on localhost and have it make API calls to a deployed django rest framework backend without encountering cors and csrf issues? Currently, I am facing the following challenges: I cannot access the cookie from the ...

To ensure that new tabs are opened directly within jQuery UI tabs, the tab should be created within the jQuery UI tabs interface

I have integrated jquery-UI to create a dynamic Tab panel. When I click on the "Add Tab" button, a new tab is created. However, the new tab does not open automatically. It only opens when clicked on. $(function() { var tabTitle = $( ...

Creating personalized HTML with a script source

Having trouble using my custom HTML file as a script src: function(){ var ctx; function setupCanvas(setupVariable){ ctx = setupVariable; }; function circ(x, y, lps, wps, fill, outline){ if(outline === true){ ...

Is there a way that I can move data input from one page to another using a form table?

Currently, I am developing a practice task manager using Bootstrap-4 and Vue.js. Although this is all relatively new to me, I have made significant progress. The only thing left to do is figure out how to transfer the input data from one html page to anoth ...

Problem with Bootstrap loading state when certain input fields are required

Just starting out with Bootstrap 3 and looking to integrate the loading state button function into my form. I've set up an input field with the required option as shown below. <form> <input class="input" name="title" type="text" required / ...

AngularJS encountered an error: The token '|' was unexpected and expected ':' instead

My HTML file contains a condition where certain fields need to be displayed automatically in landscape mode using filters. However, when I run the program, I encounter the following code: <tbody> <tr ng-repeat="ledger in vm.ledgers ...

AgGrid's magical dropdown feature

Struggling to integrate a bootstrap-4 dropdown menu with AgGrid, I'm facing an issue where the data table overlaps the dropdown when the html is present. Attempts to increase the z-index have not yielded results. Below is the html code snippet: < ...

Learn how to cycle through three different texts that appear in the same spot using smooth transitions

I am working with three different rows that contain the Typography component. My goal is to display the first row, followed by the second, then the third, and back to the first one in a continuous loop. All three rows should be shown in the same location, ...

Using Javascript/JQuery to apply pixel values in CSS styling

Recently, I've come across a discrepancy between two different ways of accessing CSS properties in jQuery: <foo>.css('marginTop') (which I always assumed was the standard notation) and <foo>.css('margin-top') (which ...