IE 11 needs class w-100 in many locations. Inconsistency Chrome/firefox <-> IE11, iOS safari affected as well

Bootstrap 4 beta 2

Windows 10 IE 11

I just built a website, then looked at it in IE. Now I have to go through everything an add w-100 in many places

open with chrome, then with IE https://codepen.io/anon/pen/MOejLY

IE:

chrome

fix / workaround:

add w-100 to the div with class .bippo

code for completeness

HTML

<div class="container-fluid">
  <div class="row no-gutters">
    <div class="col-12">
      <div class="foobar-mine  d-flex justify-content-center align-items-center ">
        <div class="row no-gutters  bippo">
          <div class="col-4">
            more stuff with a lot of content xx aa bbb ccc dd  ee f  gg
          </div>
          <div class="col-4">
            more stuff with a lot of content xx aa bbb ccc dd  ee f  gg
          </div>
          <div class="col-4">
            more stuff with a lot of content xx aa bbb ccc dd  ee f  gg
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.bippo div{
  background-color: cornflowerblue;
  
}

.foobar-mine {
  display: inline-block
}

[torian257x]

looking back at it, it is actually funny

bootstrap issue XY:

solution: don’t use bootstrap

issue closed

not sure if I need to cry or laugh

I mean I get it, you have many issues with the new framework and everything and want to close some

but that one is really some special way of closing your issues

On 25 November 2017 at 16:16, Mark Otto [e-mail] wrote:

Looking at your code, there are a few things wrong or confusing.

There’s no need for the first .row or .col-12; that’s completely unnecessary as it just adds two levels of markup without any change. This is literally the same as wrapping the rest of your code in nothing. Reduce that code down and it renders the same in IE11 and Chrome on latest Win10: https://codepen.io/anon/pen/MOBexY.

Your second example I don’t understand at all. Why set the width of the parent to 320px, but the children within to 290px? .col is intended to create equal-width columns, but you’re effectively forcing the browser to undo that (Chrome is getting it right here). If you want three equal width columns, nix the width.

All told, this doesn’t seem like Bootstrap bugs, but either too much code or a browser bug with flex.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/twbs/bootstrap/issues/24687#issuecomment-346966644, or mute the thread https://github.com/notifications/unsubscribe-auth/AB-d-mJoIhS9keMgP8rm3e4eDizZVyj6ks5s6IPJgaJpZM4QSpb9 .

[torian257x]

my fist code pen -> that is exactly what I was expecting. I provided a screenshot of IE (that is desktop resolution), and I provided a workaround that makes it work in IE. Look at the screenshot from IE and look at your screenshots. Again: yes I am sure there are different ways to do it. But people are using your library all over their components, just like I do, in non trivial html structures, nested etc.

tell me if you need further help understanding what is the issue

dont have IE / windows?

go here https://netrenderer.com/index.php enter url: http://jsbin.com/vesuyafugo

renders the same in IE11 like on my local IE11 on windows