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

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

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.

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?

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 <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> <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 <p class=""> Viewl all Location Viewl all Location </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>

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.

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

.

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">
   <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>
   <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
                     <p class="">
                        Viewl all Location Viewl all Location
   </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>
I've not got anyway of testing IE.
But i've used your example and taken it to the grass roots of Bootstrap 4.
I have modified your css and html to use :before to overlay the image with your black opaque style. I apply this on .card-img-overlay and any child elements will naturally appear above the :before pseudo style.
<div class="card bg-dark text-white">
  <img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" class="card-img" alt="...">
  <div class="card-img-overlay">
    <div class="container h-100">
      <div class="row h-100">
        <div class="col align-self-center">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <p class="card-text">Last updated 3 mins ago</p>
SASS/CSS
.card-img-overlay {
  overflow: hidden;
  &:before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: #000;
    opacity: 0.3;
Try this fiddle in IE... https://jsfiddle.net/joshmoto/xm4ude0L/
If this still doesn't work in IE still then you are going to have to be old school and find a work around. If it was me, I would output a browser body class, and control the problem for the IE users using css. You have not mentioned how you generate your html so I cant advise on a browser body class function.
Or just use browser happy to promote better ways of web browsing to force visiting users to up their game and get with the times :)
   <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>
   <section class="dnow-regionsWrap">
      <div class="dnow-regionsContent">    
         <div class="card bg-dark text-white">
          <img src="https://cdn2.outdoorphotographer.com/2018/04/DShow_Echoconfl-824x548.jpg" alt="">
            <div class="card-img-overlay align-items-center d-flex">
              <div class="card-body ">
                <h2 class="card-title">
                 Canada
                <p class="card-text">
                  Viewl all Location Viewl all Location
   </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>
                IE still has about 3% market share (as per gs.statcounter.com/…) so you cant count it out completely yet. Progressive enchancemnt is the way to go in my opinion.
– Fabian S.
                Jan 16, 2019 at 7:32
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.