Don't hold your breath in anticipation of any new features in DW.
If you want to use Bootstrap 5, there's nothing stopping you. Just be aware of the many changes that have occurred since BS 4: new class names, new Popper 2, no more jQuery dependencies, etc...
https://getbootstrap.com/docs/5.0/migration/
BOOTSTRAP 5 STARTER PAGE
<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 5.1.3 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--latest minified CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!--latest minified JS bundle-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-3">
<div class="row">
<div class="col-md-10 mx-auto">
<h3 class="mt-3">Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner.
</p>
<p>When button is clicked, the navigation bar will open to reveal links.
</p>
<p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium necessitatibus neque commodi repudiandae, iste. </p>
</div>
<div class="col-md-3">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium necessitatibus neque commodi repudiandae, iste. </p>
</div>
<div class="col-md-3">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium necessitatibus neque commodi repudiandae, iste.</p>
</div>
<div class="col-md-3">
<h3>Column 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<footer class="container-fluid">
<div class="row bg-dark text-light text-center">
<div class="col-md-4">
<p>Footer text</p>
</div>
<div class="col-md-4">
<p>Footer text</p>
</div>
<div class="col-md-4">
<p>Footer text</p>
</div>
</div>
</footer>
</body>
</html>
Hope that helps.
Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media
5
Replies
AdChoices