1 Correct answer
Keep in mind that DW has not been updated with new Bootstrap 4 yet. If you decide to use it, you will need a working knowledge of the new code and classes in Bootstrap 4. See link below for examples.
https://v4-alpha.getbootstrap.com/examples/
Nancy
21
Replies
Please note that Bootstrap 3 will remain current for quite some time to come.
Hence, if you need support for IE8/IE9, Safari 8-, iOS 8-, etc you can keep using Bootstrap 3.
Edit: Please note that I am better looking than you, ikbendeknapste 
BenPleysier wrote
Edit: Please note that I am better looking than you, ikbendeknapste
But we cannot be certain of that Ben, as there is no picture in the user profile 
And who is to say your picture is of you
The OP's screen name = ikbendeknapste = Ik ben de knapste = I'm the cutest one. 
Even IE11, which is used by over 12% of users, can present a problem as per the following example.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap 4 Test</title>
<script type="text/javascript" src="dmxAppConnect/dmxAppConnect.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<style>
/* Sticky Footer */
.full-height {
height: 100vh;
min-height: 100vh;
}
.flex-1 {
flex: 1;
}
</style>
</head>
<body is="dmx-app" id="index" class="d-flex flex-column full-height">
<header class="container-fluid bg-warning">
<h1>My Site</h1>
</header>
<nav class="container-fluid bg-primary">
<p class="text-light">MenuBar</p>
</nav>
<section class="container flex-1">
<div class="row d-flex flex-md-column flex-md-row-reverse">
<main class="col">Main Content</main>
<aside class="col-md-3">Sidebar</aside>
</div>
</section>
<footer class="container-fluid bg-warning">
<p class="text-muted">Footer</p>
</footer>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
</body>
</html>
In all browsers, the above produces (this shows IE11)
Now add an image by adding the following line after the NAV container
<img src="http://via.placeholder.com/1620x400" class="img-fluid" alt"">
and it will break in IE11 - OK in all newer browsers.
The way that I solved this, was to remove the sticky footer effect from IE11
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>Bootstrap 4 Test</title>
<script type="text/javascript" src="dmxAppConnect/dmxAppConnect.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<style>
@supports (display: flex) {
/* Sticky Footer */
.full-height {
height: 100vh;
min-height: 100vh;
display: -webkit-flex; /* Safari */
-webkit-flex-direction: column; /* Safari 6.1+ */
display: flex;
flex-direction: column;
}
.flex-1 {
flex: 1;
}
}
</style>
</head>
<body is="dmx-app" id="index" class="full-height">
<header class="container-fluid bg-warning">
<h1>My Site</h1>
</header>
<nav class="container-fluid bg-primary">
<p class="text-light">MenuBar</p>
</nav>
<img src="http://via.placeholder.com/1620x400" class="img-fluid" alt"">
<section class="container flex-1">
<div class="row d-flex flex-md-column flex-md-row-reverse">
<main class="col">Main Content</main>
<aside class="col-md-3">Sidebar</aside>
</div>
</section>
<footer class="container-fluid bg-warning">
<p class="text-muted">Footer</p>
</footer>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
</body></html>
But this still leaves a problem in IE11 with white space between the elements
For a foolproof and time efficient way, I would suggest that most users should stay with Bootstrap 3
AdChoices