Adjusting the left and right margins within a Bootstrap row nested inside a card component

I am struggling to adjust the left and right margins for a Bootstrap row inside a card. Below is my CSS code along with some screenshots for reference.

<div class="container" style="margin-bottom: -20px;">
    <div class="row">
        <div class="col-6">
            <div class="card shadow bg-white pt-1 pb-1 rounded">
                    <div class="row" id="xyz">
                        <div class="col-4">
                            <p><b>1,933</b></p>
                        </div>
                        <div class="col-4">
                            <p><b>&#8377;100</b></p>
                        </div>
                        <div class="col-4" style="white-space:nowrap">
                            <p><b>&#8377;4,000</b></p>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6">
                            <img class="mx-auto d-block card-img" src="../../assets/images/note_9_pro_max1.jpg" alt="note-pro-max" style="width: 50px; height: 100px;">
                        </div>    
                        <div class="col-6" style="white-space:nowrap">
                            <p><b>&#8377;1,000</b></p>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</div>

https://i.sstatic.net/8Qmvi.png

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

htmlcssbootstrap-4

Answer №1

Include pl-1 and pr-1 within the card div and test it out...

  <div class="card shadow bg-white pt-1 pb-1 pl-1 pr-1 rounded">

JSFIDDLE

Answer №2

It took me a little while, but I finally discovered a solution that actually works! By adjusting the card's "width" using percentages, you can achieve the desired effect.

<div class="card shadow bg-white pt-1 pb-1 rounded" style="width: 95% !important;">

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

Checking Whether a Value Entered in an Input Field Exists in an Array Using jQuery

Can someone help me with checking if a specific value is in my array? I want to achieve something like that, any suggestions on how to do it? if(jQuery.inArray($('#ValueInputTitle').val, variableValueInput) !== -1) { console.log("is in arr ...

javascriptjqueryhtmlcssjive

What are the benefits of using PHP heredoc to create straightforward HTML code?

I've recently taken over the reins of a website and am looking to implement some changes. It's interesting because everything is structured using heredoc PHP scripts, yet there doesn't seem to be any actual PHP processing happening within th ...

phphtmlheredoc

Choose everything except for the list and its heading

I have a portion of HTML code on my hands. <div class="ProductDescriptionContainer"> <p>This handsome Clergy Shirt has a trim low neckband with two reinforced buttonholes, one at the front, one at the back, to align with Ziegler's Collare ...

htmlxpathhtml-agility-pack

What methods can I use to stop Meta and Title tags from injecting when I import PHP files into an HTML document?

In my PHP document, I took out the Title and Meta tags from the header section, leaving it empty: <!doctype html> <html> <head> </head> <body> <?php require '/DBConnect.php'; //More code here that generates my ou ...

phphtmlinclude

Is it possible to use multiple versions of Bootstrap on a single webpage?

My goal is to incorporate Bootstrap into a page that already has both an old version (version 3) and a new version (version 4) of Bootstrap, but I am facing JavaScript conflicts. I am trying to embed it on a third-party site over which I have no control. ...

jquerytwitter-bootstrap-3bootstrap-4

Is there a way for me to insert a variable into the src attribute of my img tag like this: `<img alt="Avatar" src=`https://graph.facebook.com/${snAvatarSnuid}/picture`>`

I need assistance with passing a variable called snAvatarSnuid within the img src tag, specifically after facebook.com/ and before /picture as shown below: <img alt="Avatar" src=`https://graph.facebook.com/${snAvatarSnuid}/picture`> Note: 1) The ht ...

javascripthtmlvue.jsvuejs2web-frontend

Ways to display HTML code on a webpage

As part of my internship, I am tasked with creating a WYSIWYG editor that can incorporate logic such as if-statements and loops. While there are existing WYSIWYG editors available, none of them seem to support this type of functionality. I am seeking tech ...

htmlweb

Using custom or external fonts icons in Chrome Packaged Apps involves the following steps:

Seeking to enhance the appearance of my Chrome Packaged App built in AngularDart, I searched for external icons online but came up empty-handed. Despite attempting various strategies and implementing the workaround provided below, I have been unable to ach ...

cssiconsdartangular-dartgoogle-chrome-app

Switching back and forth between two CSS animations using Jquery

I am working on creating a unique pendulum system using 3 balls. After successfully creating the balls and animating them, I am faced with a challenge in making the animation continuous. Here is my code: .circle { width:30px; height:30px; backgrou ...

jqueryhtmlcss

Ensuring XHTML W3C Compliance with multiple details in src attribute

We are currently working on a unique image carousel feature for our website. This carousel will display clickable thumbnails that, when clicked, will show the full-size image. In order to make this work, we need to include both URLs in the HTML code. Howev ...

htmlxhtmlw3c-validation

What is the best way to prevent a page from refreshing every second when the Bootstrap modal is being displayed or active?

I am working on a project that involves two PHP pages. In the first page, I have set up a system to display data from a MySQL database using Ajax, with the content refreshing every second. The second page contains the PHP code responsible for fetching the ...

phpjquerymysqlajaxbootstrap-4

Linking two div elements together with a circular connector at the termination point of the line

I am currently working on designing a set of cards that will showcase a timeline. I envision these cards to be connected by lines with circles at each end, for a visually appealing effect. At the moment, I have created the cards themselves but I am struggl ...

javascripthtmlcss

Displaying TestNG Reporter information in Gradle-generated HTML test reports

I've been searching high and low for a solution to my problem with no luck, so I'm turning directly to you. Is there any way to display TestNG's Reporter output in Gradle HTML reports? Here's the scenario: I have multiple testNG test m ...

htmlgradlereporttestng

Sort the currency column in an HTML table through JavaScript

I have a code snippet below that I'm currently utilizing to arrange columns in an HTML table. The code works perfectly for alphabetical sorting and also for single-digit numbers. However, when attempting to sort a column containing currency values, t ...

javascripthtml

The scrollOverflow feature in fullPage.js is not properly detecting the height of dynamically generated content

I have successfully implemented fullpage.js on my website. Everything is working perfectly with fullpage.js, but I am facing an issue when trying to open a div on click of pagination. Specifically, the browser scroll gets disabled when the div containing a ...

javascriptjqueryhtmlfullpage.js

What is the proper location for inserting image copy code within my codebase?

I encountered an issue with using this code: copy('imgurl', 'images/covers/file.jpeg'); The code successfully copies an image URL to a file on my website when placed in a PHP page alone, but it fails to work within my actual code. He ...

phphtmlajaxdatabase

Creating Hover Effects for Touch Screen Devices with jQuery

Recently, I came across a piece of code that enables a link to become active on the second tap when using touch screen devices. I found this code snippet from: hnldesign.nl (function($) { var landingLink = '.nav-landing > li'; if ((' ...

jquerycss

The icon cannot be displayed using the <use> tag in HTML

While examining the source code, I stumbled upon the <use></use> tag. <use xlink:href="#icon-ghost"></use> I couldn't find extensive information about this particular tag. Can someone explain what it is and how it is typicall ...

htmlcss

The alignment of Material-UI Button and ButtonGroup is not consistent

I'm puzzled as to why the Button and ButtonGroup elements are not aligned on the baseline in the code snippet provided. Is there a specific property that can be adjusted on the ButtonGroup element to achieve alignment? <!DOCTYPE html> <htm ...

cssreactjsmaterial-ui

Optimizing CSS to eliminate extra space from the first button in the navigation menu bar

I'm currently working on creating a simple CSS-based navigation bar, but I've encountered an issue. The first item in my HTML list seems to have extra space to its left that I can't seem to remove. Check out the live example here Also avai ...

htmlcssnavigationuinavigationbar