Issue with IE 11: Including card image inside anchor tags in Bootstrap 4 causes unwanted white space

I'm having an issue with my Bootstrap 4 card markup where the image is wrapped inside an anchor tag. The problem arises when viewing it in IE 11, as there is a large white space underneath the image, while everything displays fine in Chrome, Edge, and Firefox.

<div class="card" style="width: 18rem;">
  <a href="#">
      <img class="card-img-top" src="/images/myimage.jpg" >
  </a>
  <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Interestingly, when I remove the anchor tags around the image, the white space disappears. Any suggestions on how to fix this issue?

htmlcssbootstrap-4

Answer №1

.image-container img {
  height: 100%;
}

Apply height:100% to the image element

Answer №2

Yes, the solution has been found...

To fix the issue, simply include the following three lines of CSS in your file.

.card a{
  display:inline-block;
  width:100%;
  height:100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="card" style="width: 18rem;">
  <a href="#">
      <img class="card-img-top" src="/images/myimage.jpg" >
  </a>
  <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
  </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

Videos embedded using the React HTML video tag are not automatically playing on mobile devices

I have implemented a jsx variable to insert a video into my html. Despite following the advice to include muted defaultMuted, and playsinline (which I have already done), the videos autoplay on safari, chrome, and firefox on my computer but not on mobile ...

javascripthtmlreactjshtml5-video

Modify section background color for every iteration in an image carousel

Is it possible to dynamically change the background color of the cd-hero section each time a new image is loaded in a simple slider on the home page? Can this be achieved by storing predefined colors in an array so that different images trigger different b ...

javascriptjqueryhtmlcss

Displaying collapsible elements in the navbar changes the overall aesthetic of the navbar design

I am attempting to design a navbar that includes collapsible items, a logo, and a button that remains visible at all times. My intention is to have the collapsible items trigger button on the left, before the logo, and the always visible button on the righ ...

twitter-bootstrapbootstrap-4

The image is not resizing correctly

Currently, the background-image on my website displays properly when the browser occupies the entire screen. However, when I resize the browser window, the image shrinks to a certain point and then suddenly stops adjusting. Here is a visual representation ...

htmlcssbootstrap-4

Attempting to utilize Bootstrap for containing text inside of a background

<div class="container"> <div class="row"> <div class="col-lg-9"> <h2 style="font-family:times-new-roman">BIOGRAPHY</h2> <div id="demo" class="collapse"> <p> Isaac Newton (4 January 1643 – 31 March 1727) w ...

htmlbootstrap-4

CSS - Issue with aligning image captions

I created an HTML snippet that has the following structure: <div class="large-4 columns"> <div class="promo-box"> <a href="#"> <img src="/our-projec ...

htmlcss

Is your toggleclass button suffering from technical difficulties?

Why am I having trouble toggling the box with the button? I want it to maintain its current functionality and also toggle the box as well. Check out my JS fiddle for reference. Here's my code snippet: $(function timelinetiles() { $('.timeline ...

javascriptjqueryhtmltoggletoggleclass

What exactly is the hashtag text and what is the best way to eliminate it?

While working with Bootstrap, I encountered a strange issue where an unknown element with the id of "text" appeared out of nowhere. When I view the page in my browser, there are #text elements appearing between each <li> elements. Upon inspecting the ...

html

Is it possible for me to generate values using PHP that can be easily read by JavaScript?

I'm currently building a website and I am facing some challenges when trying to incorporate JavaScript for real-time calculations. Here are my issues: Is there a more efficient way to avoid manually typing out the code for each level up to 90, lik ...

phpjavascripthtml

Is it possible to separate the words in my navigation bar to create more spacing and change the color of the text to white?

I've been attempting to create a navigation bar without much success. My goal is to position the words "Main Page", "About Me", and "Bibliography" with space between them, aligned left, center, and right respectively. Additionally, I want to change t ...

htmlcss

Move the search bar to the left side of the screen instead of the

Is there a way for the search bar in my navbar's dropup menu to transition from right to left? Currently, the dropup menu is positioned on the far right of the screen as desired, but when I click on the search button, the search bar extends off the sc ...

htmlcssbootstrap-5

Tips for utilizing bootstrap.css to position a web design form in the center of the page and place the copyright at the bottom

I have spent several hours trying to figure out how to achieve this, but still haven't found the solution. I have a form that I believe doesn't look very good: https://i.sstatic.net/t1MRd.png So, I attempted to center the form on the page and ...

jqueryhtmlcsstwitter-bootstrap

Is the append() function malfunctioning in jQuery?

Why is it copying two lines when I only want one line to be cloned on button click? Is there a way to make sure that only a single line is copied each time the button is clicked? Here is my code: $(function() { $('.add-more-room-btn').clic ...

javascripthtmljquerycss

Modifying the variable value upon clicking

I need to update a variable value on click, in order to send the updated value via ajax and load data either in ascending or descending format. Below is the JavaScript section at top of the page. var sortDirection = '0'; Now, here is the corre ...

javascriptjqueryhtmlajax

Oops! Looks like the module "@google-cloud/vision" hasn't been loaded in this context yet. Make sure to use require([]) to load it before proceeding

Encountering an issue with the error message Module name "@google-cloud/vision" has not been loaded yet for context: _. Use require([]) while running my project. I have included require.js in my project and added the script tag in my HTML file <script d ...

javascripthtmlgoogle-chromerequirejs

Adjusting image dimensions before delivery for a mobile site

On my desktop website, I currently use images with a size of 500*500. However, when it comes to the mobile version of my site, downloading such large images takes an excessive amount of time. Simply specifying width & height attributes in <img> doesn ...

phpcssimage

Is there an automatic bottom padding feature?

Currently, I am facing a challenge in fitting the loader into the container without it being overridden by the browser. Using padding-bottom is not an ideal solution as it results in the loader appearing un-resized and unprofessional. Any suggestions or co ...

cssreactjstypescript

Generate a custom comment page for every URL identifier

I am currently working on creating a PHP comment page that displays unique comments for each specific URL ID. However, I have encountered an issue where the comment page is shared among all URLs. I understand that I need to add the URL ID (bug ID) to the M ...

phphtmlajax

Searching for the name of dynamically generated input fields using jQuery

I have a straightforward form featuring radio buttons <form> <input type="radio" name="radio_1" value="1" />Radio 1 <input type="radio" name="radio_1" value="2" />Radio 2 <input type="radio" name="radio_1" value="3" />Radio 3 </ ...

javascriptjqueryhtml

Incorporate Vimeo video with full-width display

When embedding a Vimeo video on my website, I use the following code: <div class="fys-fp-content-wrapper"> <div id="fys-fp-video"> </div> </div> #fys-fp-video { position: relative; padding-bottom: 56.25%; padding-top: ...

htmlcssvideovimeo