Bootstrap 4 IE not taking col-sm-12 on card-img-overlay

Question

I created a cta with image and text overlay using the bootstrap card-img-overlay class. Also added a div with dark low opacity to make the text brighter. Everything work good on all browsers except IE 11.

Q1: where is the column width breaking in IE, i don't think its my css that's causing this part. is it a known bootstrap 4 issue?

Q2: how to fix the overlay div to show on top of the image like chrome and other browsers. Is there a better approch that works for both?

broke IE IMAGE

Chome and other browsers that are working good

.dnow-regionsContent .overlay-div {
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #000;
    opacity: 0.3;
}
.dnow-regionsContent img {
    max-height: 40rem;
}

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>slick slider</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous">


   <link rel="stylesheet" href="css/style.css">
</head>

<body>
   <section class="dnow-regionsWrap">
      <div class="dnow-regionsContent">
         <div class="card bg-dark text-white">
            <img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" alt="">
            <div class="overlay-div"></div>
            <div class="card-img-overlay d-flex align-items-center container">
               <div class="row  mb-5">
                  <div class=" col-sm-12 text-content">
                     <h2 class="card-title ">
                        Canada
                     </h2>
                     <p class="">
                        Viewl all Location Viewl all Location
                     </p>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </section>

   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"></script>

</body>

</html>

divy3993 divy3993 · Accepted Answer · 2019-01-19T05:14:39

The actual reason:

It's not col-sm-12, but the d-flex on card-img-overlay which makes your design look not proper in IE.

Why?

When display:flex is applied to an element, the immediate child (i.e. the flex items) would need some width to be specified or else they would not expand or take up enough space as we require unless content is not sufficient enough.

In your case we have d-flex along card-img-overlay so the immediate child (i.e. flex item) of it .row, would not be having 100% width. Now for col-sm-12 column, 100% would be full horizontal space that is with its parent (.row) which is not itself wide enough. That's the real issue here.

Solution:

Give 100% width to .row, you may use class of Bootstrap 4 w-100.
- This could have been the real solution to your issue/query but few things are still needed to get the look you want, as you have it in other browsers.
Giving position: absolute does not work alone, the smart browsers would know what to do, but the other ones would need offset values like top & left. In your case with value as 0.
Finally image with actual dimensions to attributes width and height of <img> tag, here in your case it would be width="1200" & height="800".

So basically bootstrap has nothing to do with this issue, it's just the flow of markup and CSS properties.

Side Note:

I hope the above steps helped you to clear issue or understand it. I would suggest to always have width and height attributes for an <img> tag so that the browsers(old ones) would know to make that specific size of the block on a page.

.dnow-regionsContent .overlay-div {
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #000;
    opacity: 0.3;
    /*Added*/
    top:0;
    left:0;
}
.dnow-regionsContent img {
    max-height: 40rem;
}

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>slick slider</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous">


   <link rel="stylesheet" href="css/style.css">
</head>

<body>
   <section class="dnow-regionsWrap">
      <div class="dnow-regionsContent">
         <div class="card bg-dark text-white">
            <img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" width="1200" height="800" alt="">
            <div class="overlay-div"></div>
            <div class="card-img-overlay d-flex align-items-center container">
               <div class="row mb-5 w-100">
                  <div class=" col-sm-12 text-content">
                     <h2 class="card-title ">
                        Canada
                     </h2>
                     <p class="">
                        Viewl all Location Viewl all Location
                     </p>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </section>

   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"></script>

</body>

</html>

It was not you, it was IE.

Hope this helps you!

Bootstrap 4 IE not taking col-sm-12 on card-img-overlay

4 Answers