Adjusting Padding for Improved Mobile Display of BS4 Grid Cards

I am working on a bootstrap-4 grid card layout for my page. On mobile devices in portrait view, I want the cards to be displayed 2 up. However, I am facing an issue where there is extra padding between the cards compared to the padding on the outside edges. This is because the left and right card paddings are meeting in between the two adjacent cards.

Since the number of cards can vary significantly from 1 to 99, I am unsure how to adjust the inner padding to achieve a more consistent look. Please refer to the image for a visual representation: Green indicates the left and right padding, while gray represents the actual card area.

https://i.sstatic.net/cXm31.png

htmlcsssassbootstrap-4

Answer №1

Give this unique CSS a try on your padded card element to eliminate the left padding and maintain consistent padding on all sides.

Substitute "your-card-padded-class" with the class name of your padded card.

.your-card-padded-class:nth-child(even) {
    padding-left: 0px !important;
}

Answer №2

Padding is being duplicated because all col-* classes include

padding-left: 15px;
padding-right: 15px;

To override this, you can use padding: 0.

EXAMPLE

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="row m-0">
  <div class="col-4 p-0">I am first</div>
  <div class="col-4 p-0">I am second</div>
  <div class="col-4 p-0">I am third</div>
</div>

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

Is the form validation failing to update after an item is removed from the model? Possible bug detected?

Lately, I've been exploring AngularJS and encountered an interesting bug. Let me start by sharing some functional code: View: <body ng-controller="MainCtrl"> <form name="form"> <div ng-repeat="phone in phoneNumbers"> ...

javascripthtmlvalidationangularjs

What is the process for downloading a blob using an input field?

Can you help me figure out how to download a blob into an input field? Here is the HTML code I have: <img id="image" src="${pageContext.request.contextPath}/image/accaunt/user?${nowDate.time}"/> <label id="text-add-photo" for="img-input">repl ...

javascripthtmlcropperjs

Laravel application faces issues with URL rewriting generating incorrect URLs in compiled CSS files

Having some trouble compiling Font Awesome SCSS files in my Laravel application. I installed Font Awesome using NPM, and the compiled CSS is stored in the 'public/css/' folder while a 'public/fonts/' folder was also created. However, th ...

csslaravelsass

I could use some help navigating payment gateways

I'm new to payment gateways and would appreciate any recommendations or advice. ...

phphtmlajaxapipayment-gateway

Arranging text and images strategically

I am trying to position an image and text within separate containers using div. The desired layout is to have the img floated left and the text centered on the page, but I am having trouble achieving this. Each element has its own div. Can you provide as ...

htmlcss

Using React Native's stylesheet to apply multiple values in a CSS statement

Here's a scenario to help clarify my question: Imagine I want to add margin to an element in the following way: const myView = () => <View style={styles.viewStyle}></View> const styles = StyleSheet.create({ viewStyle: { margin: ...

javascriptcssreactjsreact-native

Troubleshooting: Jquery UI Draggable - Cursor losing track of draggable element

I want to create a draggable popup with Jquery UI functionality, but I'm facing an issue where the cursor does not stay aligned with the popup element when dragged. When dragging the popup element to the left, the mouse cursor goes beyond the div elem ...

javascriptjqueryhtmljquery-uijquery-ui-draggable

The correct way to use the useState hook for implementing an icon in React

My attempt at implementing a feature in React allows users to see active feedback on the screen by changing its icon when clicked. How can I make it change to another icon (e.g. from Box to BoxChecked) once it is clicked? Note: I believe this code line i ...

htmlreactjsreact-hooksreact-icons

Struggling with configuring a personalized version of Bootstrap 4 in Sass

I am currently in the process of creating a custom version of Bootstrap 4. One of the main changes I want to make is switching the default color ("primary") from Bootstrap Blue to something different. Initially, I made the edits directly to the Bootstrap ...

cssbootstrap-4sasscustomization

Can anyone provide a solution for determining the number of active intervals in Javascript?

Similar Question: How to View All Timeouts and Intervals in JavaScript? I've been working on an HTML5 game that includes a lot of graphical effects using intervals created by the setInterval function. However, I've noticed that my game is ru ...

javascriptperformancehtmlsetinterval

failure of svg spinning

I'm currently working with an SVG file and attempting to incorporate a spinning animation similar to loaders and spinners. However, I am facing an issue where the rotating radius is too large and I am struggling to control it effectively. CSS: .image ...

javascripthtmlsvg

Animating a SVG element within a group tag using the path element

I'm struggling to make a slice of a circle rotate using the :hover selector in CSS. Even though my initial attempt at applying CSS transformations works perfectly, the rotation stops when I introduce the :hover selector. Below is the HTML and CSS co ...

htmlcsssvg

Creating HTML in Go using data from a struct

I have an HTML file named email.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Shareholder</title> </head> <body> <h1> {{.PageTitle}} </h1> ...

htmlgogo-templates

The mysterious disappearance of the div element exclusively in Chrome

Currently, I am working on an HTML/CSS chat application that is being integrated with the WebSocket API. However, I am facing an issue in Chrome only, as the div containing my input field and send button is not displaying on the page (this has been tested ...

htmlcssgoogle-chromebootstrap-4

Error: knockoutjs - unable to locate ko

Here is the knockoutjs code that I have written: $(function () { function QuizViewModel() { var self = this; self.previousQuestions = ko.observableArray([]); self.questions = ko.observableArray([]); self.thisQuestion = ko.observable() ...

htmlknockout.js

Which IDE is the top choice for HTML5 when programming with .NET on the server side?

Is Visual Studio 2010's support for JavaScript and jQuery enough to make it a top choice for working with JS/HTML5? Or are there other IDEs out there that offer better options? I typically use .Net for the server side of my projects, so Visual Studio ...

javascriptvisual-studio-2010htmlide

Are HTML's Regular Expressions the Equivalent of JavaScript's Regular Expressions?

I have been trying to utilize the pattern="" attribute in HTML to implement regex, but unfortunately, I am unable to locate a comprehensive list of HTML regex parameters. This has led me to ponder whether the syntax for regex in HTML is similar to JavaSc ...

javascripthtmlregex

Tips on updating primeng Panel Menu appearance with scss

I'm looking to customize the color of my panel menu to black. Below is the HTML code I am using. <p-panelMenu styleClass="font-bold text-xs m-0 w-11" [model]="items" [multiple]='false'></p-panelMenu> ...

htmlcssangularsassprimeng

experimenting with adding fresh choices to dropdown menu using ajax and jquery

When attempting to load a list of locations through ajax/jQuery, I encounter an issue. After typing a letter into the input field, the first response is displayed but subsequent responses are simply appended to it. I have tried using .html('') an ...

javascriptjqueryhtmlajaxhtml-select

Positioning a span to be below an input field

Below is the code for a Blazor component that includes a textbox which can be edited with the click of a button. @if (_editing) { <div class="floatingbox position-relative"> ...

cssbootstrap-4blazor-server-side