How come I am unable to squeeze in 4 columns with cards on a compact screen while utilizing Bootstrap 4?

After several attempts, the 4 columns still refuse to conform to a smaller screen size. The final column ends up being displayed horizontally at the bottom of the cards.

  @media (max-width: 575px) {
    .crd-group {
      flex-wrap: wrap;
    }
    .crd-group .col-3 {
      flex: 0 0 50%;
      max-width: 50%;
    }
  }

  .card {
    background-color: #fafafa;
    font-size: 12px;
    border-radius: 5px !important;
    flex-basis: 25%;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    outline: none;
    border: none;
    border-radius: 7px;
    flex-direction: inherit !important;
    transition: all 0.3s ease-in-out;
    transform: scale(1);
    display: none;
  }
htmlcssbootstrap-4

Answer №1

Managing the content within these cards to fit into 4 columns can be a bit of a challenge. However, with the clever use of the 'container-fluid row' class on the root element and some adjustment of padding from inner column elements using the p-0 class, you can achieve the desired 4-column layout on the md breakpoint screen size, to some extent.

Once you surpass that breakpoint, the nested inner columns will need to be made full width (col-12) to stack on top of each other, creating space for the card containers, albeit with some uncertainty regarding the visual appearance.

@media (max-width: 575px) {
  .crd-group {
    flex-wrap: wrap;
  }
  .crd-group .col-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

.card {
/*   min-width: 300px; */
  background-color: #fafafa;
...
...
... additional CSS code goes here ...

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

JavaScript function to substitute instead of writing

function replaceHTML(a,b) { var x = document.getElementById("canvas_html").contentDocument; x.innerHTML = b; } Although the current function works fine, I would like to update it to directly replace the existing content instead of writing new con ...

javascripthtml

Blueprint CSS is causing a padding problem

This piece of code is perfectly styled with blueprintcss: <div class="container"> <div class="span-12" style="background-color : cyan"> Hello </div> <div class="span-12 last" style="background-color : green"> Bye </div& ...

cssblueprint-css

Having difficulty manipulating the answers by alternating, clicking, or hovering

I'm currently working on a template that includes 3 questions and answers that I want to hide initially, and have them revealed only when the user interacts by toggling, hovering, or clicking. I have successfully hidden the answers, but I am struggli ...

jqueryhtml

What is the Best Way to Send JavaScript Variables to MYSQL Database with PHP?

I am having trouble sending my variable to a MySQL database. The database only displays the variable when using the HTML input tag. The error message I received was "Undefined index: rate & amount." Seeking assistance to resolve this issue. Thank you! ...

javascriptphphtmlmysql

Display DIV when the page loads, and hide it when any radio button is clicked

If you're looking to create a page with hidden content that is revealed when specific radio buttons are clicked, you've come to the right place. The concept is simple - the page starts off blank, but upon selecting a radio button, one div is show ...

htmlhidestartup

Creating solid, dotted, and dashed lines with basic HTML/CSS for tcpdf rendering

Take a look at the image below. It combines two graphs, with different curves represented by solid lines, dotted lines, and various forms of dashed lines with varying stroke lengths. In summary: I am looking for a simple way to create solid lines, dashed ...

htmlcsstcpdf

import an external JavaScript file in an HTML document

Looking to load a .js file from a simple HTML file? If you have these files in the same folder: start.js var http = require('http'); var fs = require('fs'); http.createServer(function (req, response) { fs.readFile('index.htm ...

javascripthtmlnode.js

Issues with responsive design

Frontend mentor projects have been a tricky challenge for me lately, especially when it comes to serving images of different viewport sizes on desktop. I've tried using the picture element and specifying at what width the image should be served, but f ...

htmlcsssassfrontend

Instead of modifying the selected class, jQuery generates inline styles

Utilizing the following code to dynamically create a class: $("head").append('<style type="text/css"></style>'); var newStyleElement = $("head").children(':last'); newStyleElement.html('.move{transform: translateX(1 ...

javascriptjqueryhtmlcss

My attempts to integrate PHP into jQuery tabs have been unsuccessful

My code seems to be acting strangely, as the PHP code I originally entered in tab 2 has somehow escaped that tab and spread into all the other tabs. This means it is visible in multiple tabs instead of just one. The purpose of this PHP code is to retrieve ...

phpjqueryhtmltabs

Is there a way to remove the entire row if I dismiss a bootstrap alert?

Hey there! I'm having a little issue with an alert in a row-fluid. Curious to see? Check out my fiddle. So, when I click the "x" button to dismiss the alert, the row is still visible. Any idea how I can make the entire row disappear when I dismiss it? ...

csstwitter-bootstrap

What could be causing this excessive lag?

I've been developing a new website, but the "buttons" I'm using seem to be causing significant lag. I need help resolving this issue. You can view the website here: The problematic code snippet is shown below: <td> <a href="templi ...

javascripthtmlcssimage

Searching for matching strings in jQuery and eliminating the parent div element

Here's an HTML snippet: <div id="keywords"> <div id="container0"> <span id="term010"> this</span> <span id="term111"> is</span> <span id="term212"> a</span> <span ...

javascriptjqueryhtml

The most effective method for incorporating a header and footer into an HTML page utilizing a variety of client-side frameworks

Looking for a solution for my HTML project where I want to incorporate a header and footer to minimize rework. Any suggestions on a good approach? I have experimented with AngularJS using ng-include, and here is the code snippet: var app = angular.module ...

javascripthtmlcssangularjs

I'm having trouble understanding why my Javascript validation suddenly stopped functioning. Can anyone assist me in troubleshooting this issue?

I have been working on this webpage for a school project for a few days, and it was running smoothly until about 10 minutes ago. The only change I made was adding an extra JavaScript validation. Now, when I try to register by clicking the "register" butt ...

javascriptphphtml

Is it possible to modify the background-image using Typescript within an Angular project?

I have been struggling to change the background image in my Angular project using Typescript. I attempted to make the change directly in my HTML file because I am unsure how to do it in the CSS. Here is the line of code in my HTML file: <div style="ba ...

angularhtmltypescript

What is the best way to split two divs in this manner?

Is there a way to split two divs like this in such a manner using TailwindCSS? Alternatively, what would be the CSS code for dividing these two divs? I am struggling with this concept and cannot wrap my head around how it can possibly be achieved. ...

htmlcssmaterial-uicss-selectorstailwind-css

What is the best way to arrange three identical boxes next to each other, all of the same size

Imagine having a container with the following dimensions: .container { width: 960px; margin: 0 auto; height: 500px; } Now, envision wanting to add three boxes in the center aligned horizontally with these specifications: .box1 { background-color ...

htmlcssalignment

Display a different string from an array at random, revealing each one gradually with a time delay

Looking for a way to display strings randomly without replacing one with another? I need a script that can shuffle words in a list and present them in a random order, with the ability to adjust the delay between each word. If you have a more effective code ...

javascripthtmljquery

Django: Is there a way to modify the PayPal script for pay upon arrival?

I currently do not wish to accept online payments on my e-commerce site. Instead, I would like the courier to handle package delivery and collection of fees. How can I modify the PayPal script to bypass validations and only register payments upon arrival? ...

javascriptpythonhtmldjango