An unsolicited border encompassing an image that does not resemble a CSS border or outline within the realm of Bootstrap 4

Utilizing Bootstrap4 Cards with .PNG image sources has resulted in an unexpected border appearing. It's not a border or outline issue. https://i.sstatic.net/KHgnP.png

Here is the HTML

<div class="row">
  <div class="col-md-3">
    <div class="card mb-3">
      <img class="i-home">
    </div>
  </div>
  <div class="col-md-3">
    <div class="card mb-4 box-shadow">
      <img class="i-solar">
    </div>
  </div>
  <div class="col-md-3">
    <div class="card mb-4 box-shadow">
      <img class="i-buy">
    </div>
  </div>
  <div class="col-md-3">
    <div class="card mb-4 box-shadow">
      <img class="i-advantage">
    </div>
  </div>
</div>

As for the CSS

.col-md-3{
    padding:50px;
}

.col-md-3 .card{
    border: 0 none !important;
    background: transparent;
}

.i-home{
    display: block;
    background: transparent url(../img/ihome.png) no-repeat;
    background-position-x: center;
    background-position-y: center;
    border: none;
    height: 225px;
    width: 100%;
 }

Update: Confirmed, the images have no border issue https://i.sstatic.net/Gaovr.png

csstwitter-bootstrapbootstrap-4

Answer №1

It is important to note that the border line will appear if the src link for the image tag is missing.

<img class="i-home"> : The src attribute is missing. Even if the image is added via background, the src must be included inside the image tag. Otherwise, the browser will interpret it as an Invalid Tag declaration, resulting in a border being displayed around the missing image.

One solution:

Include a transparent image in the src link 

<img class="i-home" src="transparent image link">

Another solution:

Replace the image tag with a span tag 

<span class="i-home"></span>

Answer №2

To eliminate the borders from the cards, simply apply the class border-0 to the card divs.

By default, the borders are included in the styling of the card class, but using border-0 will remove them.

It is advised to utilize the native Bootstrap classes whenever feasible, as opposed to implementing custom CSS workarounds. Custom hacks can restrict the versatility of Bootstrap in a broader context:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row">
      <div class="col-md-3">
          <div class="card mb-3 border-0">
              <img class="i-home">
              content <br>i-home
          </div>
      </div>
      <div class="col-md-3">
          <div class="card mb-4 box-shadow border-0">
              <img class="i-solar">
              content <br>i-solar
          </div>
      </div>
      <div class="col-md-3">
          <div class="card mb-4 box-shadow border-0">
              <img class="i-buy">
              content <br>i-buy
          </div>
      </div>
      <div class="col-md-3">
          <div class="card mb-4 box-shadow border-0">
              <img class="i-advantage">
              content <br>i-advantage
          </div>
      </div>
  </div>
</div>

Answer №3

When it comes to displaying images, consider using the <div> element instead of the usual <img> tag.

For example, you can try using <div class="i-home"> instead of <img class="i-home">

Answer №4

When using an image tag inside the card class in Bootstrap 4, the default style for .card includes a border of 1px solid rgba(0,0,0,.125);. To remove this border, you can override the CSS with border:none;.

<!DOCTYPE html>
<html lang="en>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <style>
  .i-advantage{
    display: block;
    background: transparent url(https://www.w3schools.com/bootstrap4/cinqueterre.jpg) no-repeat;
    background-position-x: center;
    background-position-y: center;
    border: none;
    height: 225px;
    width: 100%;
 }
 .card {
    border: none;
}
  </style>
  
</head>
<body>
<div class="container">
<div class="card mb-4 box-shadow">
  <img class="i-advantage">
  </div>
</div>
</body>
</html>

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

What do you think about removing the Bootstrap styling from the design?

As a newcomer to Bootstrap and currently working on my second project using this framework, I find myself struggling with overriding CSS styles. It can be time-consuming to locate the specific style that needs to be changed rather than starting from scratc ...

csstwitter-bootstrap

Position a div element after another using the :after pseudo-element

My goal is simple to explain, but I have exhausted all my efforts trying to achieve it. I am hoping for the ★ symbol to appear immediately after the number 06 using jQuery. Any assistance would be greatly appreciated. The numbers are generated by a s ...

javascriptjqueryhtmlcss

Integrating Bootstrap-vue into your Webpack setup for seamless usage

After beginning a project with vuejs-templates and webpack, I decided to incorporate bootstrap-vue. Now, the challenge is figuring out how to implement a bootstrap button. In my code base, specifically in main.js, I have imported BootstrapVue: import Vu ...

javascripttwitter-bootstrapwebpackecmascript-6vue.js

Avoid allowing text to spill out of the designated container

Hey there, I've run into this issue twice now and I can't seem to find a solution for the second occurrence. The first time it happened with an image, I used max-height and width to prevent it from overflowing the div when zoomed in. But now, for ...

htmlcss

What's the best way to perfectly align table text in the center both horizontally and vertically?

Despite encountering similar or potentially identical questions, I have attempted the suggested solutions without success. My aim is to design a table that centers text both vertically and horizontally, ideally using flex. However, the structure of the ta ...

htmlcssbootstrap-4

Tips for altering the design of a registration page

I'm struggling to modify my registration page layout so that the avatar is positioned on the left while the username, password input boxes are on the right. I attempted to use split divs without success and also tried adjusting the positioning of the ...

htmlcssformsavatar

What happens in the React tutorial when the clear fix is commented out and the appearance does not change?

Currently, I am working through the React tutorial and have encountered a question regarding their starter code: class Square extends React.Component { render() { return ( <button className="square"> {/* TODO */} </butto ...

javascripthtmlcssreactjs

Ensuring draggable div remains fixed while scrolling through the page

I am currently working on creating a draggable menu for my website. The menu is functional and can be moved around the page as intended. However, I have encountered an issue where the menu disappears when scrolling down the page due to its position attrib ...

javascriptjqueryhtmlcss

Tips for arranging links in a vertical layout on a navigation bar that is compatible with every device

I'm having trouble aligning the links vertically in the center of the navigation bar, with the logo overlapping the content. Check out the HTML code below: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

htmlcssfrontendbootstrap-5

Create multiple buttons with uniform width by adjusting padding in CSS

I recently attempted to create buttons using CSS and padding. Here is the HTML code for the buttons: <link rel="stylesheet" type="text/css" href="css/style-login.css" /> <link rel="stylesheet" type="text/css" href="css/font-awesome-4.0.3.css" /& ...

htmlcssbutton

The most effective way to align text in a right-to-left language is by utilizing the text-align property with a

If the project is in a right-to-left language (such as Persian or Arabic), which method is preferable for setting text-align: right and direction: rtl? Option 1: Implement globally, for example: body * { direction: rtl; text-align: right; } ...

css

Tables that adapt to different screen sizes, displaying perfectly on desktop but with slight variations on mobile devices

I recently experimented with a demo to enhance the performance of tables on my website in development. The demo worked flawlessly on my desktop when I resized using a responsive tester extension for Chrome: https://i.stack.imgur.com/KzFiR.jpg However, u ...

htmlcssresponsive-designresponsive

Ways to layer two divs on each other and ensure button functionality is maintained

In the process of developing a ReactJS project, I encountered the challenge of overlapping my search bar autocomplete data with the result div located directly below it. For a more detailed understanding, please take a look at the provided image. Here&apo ...

javascriptreactjscss

Why does the IMG keep loading every time the web page is refreshed?

I am experiencing an issue with my html page where the background images are not reloading when I refresh the page, but the logo image is. The background images are called through an external CSS file, while the logo is used with an <image> tag. Wh ...

htmlcss

How can I make Material UI's grid spacing function properly in React?

I've been utilizing Material UI's Grid for my layout design. While the columns and rows are functioning properly, I've encountered an issue with the spacing attribute not working as expected. To import Grid, I have used the following code: ...

javascriptcssreactjsmaterial-ui

Using HTML video to fill entire div container

I'm currently facing an issue with using an HTML video as a fullscreen background replacement for an image. The problem is that the video overflows and covers the entire page instead of staying within the constraints of the header section. Here is th ...

htmlcsshtml5-video

Disappearing Into the Background Excluding Specific Divs

I have a dilemma with fading in and out a background image using jQuery fadeIn and fadeOut. The issue arises because my wrapper div contains elements such as sidebar and navigation that are positioned absolutely within the wrapper div, causing them to also ...

javascriptjqueryhtmlcss

Struggling to position Bootstrap navbar links completely to the right side

The navigation bar link items are not aligning all the way to the right when using mr-auto. It appears like this Here is my HTML template: <nav class="navbar navbar-default navbar-expand-lg navbar-custom"> <div class="navbar-co ...

htmlcssbootstrap-5

I would like for this message to appear periodically following the initial execution

I have developed a unique welcome feature using HTML and CSS that I would like to showcase intermittently. --------------------------- My Desired Outcome --------------------------- Initially, this feature should be triggered once (when a user first acce ...

javascripthtmlcssanimation

Resolving the issue of "Cannot set properties of null (setting 'innerHTML') at HTMLInputElement.loader" involves identifying the root cause and implementing

Need assistance with this code. Although I believe everything is correct, it still isn't working as expected. The error mentioned in the title comes up whenever I try to use it. I've made multiple modifications to the code but it's still not ...

javascripthtmlcss