Tips for eliminating the white space bordering an image within a Bootstrap card

<div class="container">
        <h1 class="text-center">Adding Items to Cart Using PHP</h1>
        <div class="row">
                <?php 
                $sql="select * from products";
                $res=$con->query($sql);
                if($res->num_rows>0)
                {
                    while($row=$res->fetch_assoc())
                    {
                        echo '
                        <div class="col-sm-6 col-lg-4 col-xl-3 col-md-6 text-center">
                            <div class="card mb-4">
                                <a href="view.php?id='. $row['PID'] .'">
                                    <img class="card-img-top" src="assets/images/'. $row['PIC'] .'" alt=""> 
                                </a>
                                <div class="card-body">                     
                                    <a href="view.php?id='. $row['PID'] .'">
                                        <h5 class="card-title">'. $row['PNAME'] .'</h5>
                                    </a>
                                </div>
                            </div>
                        </div>
                        ';
                    }
                }
                ?>
        </div>
    </div>

image

If you observe the image above closely, there is a white gap on the left side of the image card. How can this gap be removed? Are there any CSS or Bootstrap codes that can solve this issue?

Answer №1

Need a solution? Check out the code snippet below:

<div class="col-xs-12 col-md-2 col-md-offset-3"><img src="assets/images/'. $row['PIC'] .'" alt=""></div>
<div class="col-xs-12 col-md-2"><img src="assets/images/'. $row['PIC'] .'" alt="""> 
</div>
<div class="col-xs-12 col-md-2"><img src="assets/images/'. $row['PIC'] .'" alt=""> 
</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

Utilize the HTML canvas to sketch on an image that has been inserted

I have a HTML canvas element within my Ionic application. <canvas id="canvas" color="{{ color }}" width="800" height="600" style="position:relative;"></canvas> Within this canvas, I am loading an image. Below is the code snippet from the con ...

What is causing my column's content to be lacking padding on the left side and having excessive padding on the right side?

Edit: Here's the link to the codepen https://codepen.io/maptik/pen/bGKMgpJ In my React project, I'm utilizing Bootstrap to display cards for each "Product". Here is a snippet of how I am rendering it: <div className="container bg-color- ...

Tips for bridging the space between jumbotron and about section using Bootstrap

How can I eliminate the gap between the jumbotron and the about section? I have attempted to reduce the margin between the two sections, but it is not working properly. <section id="atas"> <div class="jumbotron jumbotron-flu ...

Drop-down options disappear upon refreshing the page

Code snippet for sending value to server using AJAX in JavaScript In my script, the status value may vary for each vulnerable name. When selecting a status option and storing it in the database through AJAX, the selected value is lost after refreshing th ...

The issue of checkboxes not being sorted properly in Slick Grid

Currently, I am working on resolving a sorting issue within one of our applications using Slick Grid for grid implementation. The existing sort function, although functional, presents a challenge. While it successfully sorts columns, the checkbox associate ...

Opacity of absolutely positioned elements

I am currently working on creating a popup box that will gray out the surrounding area. The problem I'm facing is that the opacity of the shadow div seems to be overriding that of the popup. I have tried changing the position from absolute to fixed an ...

Issue with non-responsive images in Bootstrap 3

Here is the bootstrap configuration that I am currently using: http://www.bootply.com/118172 I'm having an issue with the responsiveness of the image. It's not shrinking to match the height of the div on the left side. Can anyone help me trouble ...

Adding border color and width to an ion-avatar element can be achieved by using CSS properties

I've been struggling to add a border color and width to an ion-avatar element in Ionic 4. I've attempted to use various CSS3 code snippets, but nothing seems to work. This is what I have tried: .ion-avatar img{ width: 90px !important; h ...

Tips for setting a Bootstrap 3 dropdown menu to automatically open when located within a collapsed navbar

Is there a way to have my dropdown menu automatically open when the collapsed navbar is opened? Take a look at this example I created in a fiddle to see what I'm working with so far. Right now, when you click on the navbar in its collapsed state, two ...

I need to mass upload a collection of resumes stored in a zip file, then extract and display the content of each resume using a combination of HTML

I recently used a service to extract and retrieve the contents of a zip file. I am trying to read the content of the files and integrate them into the scope of my Angular project. Any suggestions would be greatly appreciated. Below is an outline of my func ...

What could be causing my React button to stop functioning as a link to an external website when using anchor tags?

I recently created some buttons for my website using React. Initially, everything was working perfectly with the buttons, but suddenly they stopped functioning. Strangely, I didn't make any alterations to the code and I'm puzzled as to why they a ...

What is the best way to modify a Bootstrap class' SASS attribute within a React component?

Just to clarify, I am utilizing react-bootstrap and attempting to incorporate bootstrap. Here is the code I have: import React from 'react' // bootstrap import { Button } from 'react-bootstrap'; const MainDisplay = () => { return ...

Customizing CSS styles for various screen dimensions

I am facing an issue with my CSS code where I want to apply different styles for a specific class on smaller devices compared to larger screens. My project primarily uses Bootstrap, but I have also included some custom CSS. On "normal" sized screens, I hav ...

What key element is not included in this code?

I've been trying to create an interactive green circle that switches between red and green when clicked. Despite checking and rechecking my code, it's still not functioning correctly. I must be making a beginner mistake somewhere. Can anyone poin ...

Adjusting the panel dimensions based on the screen size

One feature on my website is a sliding panel (Image 1) located on the right side. It appears and disappears when a button is clicked, covering the entire height of the screen.https://i.sstatic.net/dF5Zc.jpg Here's the CSS code for this sliding panel- ...

I'm running into some issues when it comes to uploading and launching my website through cPanel on Namecheap

After adjusting the permissions of all HTML and CSS files to 0755 and image files to 0644 in the public_html folder, I am encountering difficulties publishing the site. It seems like I have hit a roadblock and unsure about what steps to take next... ...

Arrangement of HTML divs and styling classes

I have been experimenting with divs and classes in order to achieve proper alignment of text on my website. Currently, I am working with 2 classes that I would like to display side by side to create 2 columns. However, the right column containing the text ...

Leveraging HTML div elements for forms can greatly enhance the user

I am in the process of developing a website where users can upload images, name them, and then submit the data to PHP code. Currently, I am using plain HTML and PHP for this project, but I intend to integrate the Bulma CSS library. The current HTML code l ...

Unable to remove the "d-none" class using Bootstrap 4

Wondering if it's possible to remove the "d-none" class using JavaScript? This is the code snippet I currently have: <div id="progressBar" class="progress d-none"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria- ...

Adding JavaScript to dynamically loaded AJAX content

I'm new to AJAX and JavaScript and unsure of how to get it working. Here is the website: When you click on portfolio images, the details load via AJAX. I want to create a slideshow for projects with multiple full-sized images. However, due to the co ...