bootstrap: Grid system broken with flex and IE10-11

The following code block renders on two lines when compiling the SASS stylesheet with option: $enable-flex: true !default;

        <div class="row">
                <div class="col-sm-6">
One of Two Columns
                </div>
                <div class="col-sm-6">
Two of Two Columns
                </div>
        </div>
</div>```

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 19 (4 by maintainers)

Commits related to this issue

IE 11 flexbox fix. https://github.com/twbs/bootstrap/issues/17310 — committed to creativedotdesign/tofino by danimalweb 8 years ago

Most upvoted comments

Using currently this in my project to get around that - works perfectly.

// IE 11 flexbox fix.
// TODO: Remove when fixed in bootstrap.
// https://github.com/twbs/bootstrap/issues/17310
@if $enable-flex {
    @each $breakpoint in map-keys($grid-breakpoints) {
        @include media-breakpoint-up($breakpoint) {
            @for $size from 1 through $grid-columns {
                .col-#{$breakpoint}-#{$size} {
                    max-width: percentage($size / $grid-columns);
                }
            }
        }
    }
}

IceReaper on Sep 22, 2015