Bootstrap 4 Ie 11 Does Not Work

Bootstrap4 issue in Internet Explorer

After thorough research of all file types I found the issue was in JS. I was using ES6 which is not supported in IE.

For example: Using of Let instead of var, or template literals couldn't trans-pile in IE.

Bootstrap & Internet Explorer 11 issues

Got it guys!

Thanks to Girdharilal and his attempt I was able to use:

.UserPhoto a {

  display: -ms-inline-flexbox;

}

Bootstrap4 validation not working in IE 11

I found how to fix it, just simply allow blocked content alert in IE11 (at the bottom) that say that IE11 restricted script and ActiveX control.

Bootstrap 4 nav-justified doesn't work properly in IE 11

So I suspect there are some issues with my customized css code.

That is correct. I went ahead and commented out some of your custom css in the snippet below and replaced some of your custom css with native Bootstrap classes (see my comments in the code).

Now, my IE11 displays everything properly.

Lesson: Do as much as possible with native Bootstrap classes and use custom css only for stuff that can't be handled with Bootstrap classes.

Here's the code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<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>

    

<style>

    .wizard-step p {

/*        margin-top: 10px;*/

/*        replaced with `mt-2` */

    }

    .wizard-step button[disabled] {

        color: gray;

    }

    .wizard-row:before {

/*

        top: 14px;

        bottom: 0;

        position: absolute;

        content: " ";

        width: 100%;

        height: 1px;

        background-color: #ccc;

*/

    }

    .btn-circle {

        width: 30px;

        height: 30px;

/*        text-align: center;*/

        padding: 6px 0;

        font-size: 12px;

        line-height: 1.428571429;

        border-radius: 16px;

    }

    .wizard-step {

/*        display: table-cell;*/

/*        text-align: center;*/

        position: relative;

    }

    .nav-link {

/*        margin: auto*/

/*        replaced with `mx-auto` */

    }

    .progress {

        background-color: #d3d3d3;

        height: 7px;

        width: 80%;

        margin: 0 auto;

        position: relative;

        top: 18.5px;

    }

    .progress-bar {

        background-color: orange;

    }

</style>

<div id="formWizard" class="wizard mt-4">

    <div class="progress">

        <div class="progress-bar" role="progressbar"></div>

    </div>

    <ul class="nav justify-content-center nav-justified">

        <li class="nav-item wizard-step">

            <a id="tab_start" class="nav-link mx-auto active btn btn-primary btn-circle" href="#tabs-1" data-toggle="tab" role="tab" aria-controls="step1" title="Step 1">1</a>

            <p class="d-none d-sm-block mt-2">Start report</p>

        </li>

        <li class="nav-item wizard-step">

            <a id="tab_report" class="nav-link mx-auto disabled btn btn-primary btn-circle" href="#tabs-2" data-toggle="tab" role="tab" aria-controls="step2" title="Step 2">2</a>

            <p class="d-none d-sm-block mt-2">Report payroll</p>

        </li>

        <li class="nav-item wizard-step">

            <a id="tab_review" class="nav-link mx-auto disabled btn btn-primary btn-circle" href="#tabs-3" data-toggle="tab" role="tab" aria-controls="step3" title="Step 3">3</a>

            <p class="d-none d-sm-block mt-2">Review and submit</p>

        </li>

        <li class="nav-item wizard-step">

            <a id="tab_confirm" class="nav-link mx-auto disabled btn btn-primary btn-circle" href="#tabs-4" data-toggle="tab" role="tab" aria-controls="step4" title="Step 4">4</a>

            <p class="d-none d-sm-block mt-2">Print confirmation</p>

        </li>

        <li class="nav-item wizard-step">

            <a id="tab_pay" class="nav-link mx-auto disabled btn btn-primary btn-circle" href="#tabs-5" data-toggle="tab" role="tab" aria-controls="step5" title="Step 5">5</a>

            <p class="d-none d-sm-block mt-2">View balance or pay</p>

        </li>

    </ul>

</div>

Bootstrap columns not working in IE11 (Flex)

It seems the issue is related to the d-flex. Try to remove the d-flex from the .container div.

Using the following code:

<div class="hero">

    <div class="container align-items-center">
        <div class="row">
            <div class="col-12">
                <div class="text__wrap d-flex flex-column">
                    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h1>
                </div>
            </div>
        </div>
    </div>

</div>

The result like this:

Bootstrap 4 navbar content vertical alignment ignored in IE 11

Turns out min-height with flex was the issue, replacing it with height did the trick. See: https://github.com/philipwalton/flexbugs#flexbug-3 The suggested workaround also worked, and would be helpful where min-height was necessary.

---

Related Topics