As the title states, the Starter Pages and Templates need to be updated to the latest version of Bootstrap. At the moment they are based on Bootstrap 4.
For more see:
https://community.wappler.io/t/end-of-life-status-bootstrap-4-poll/59856/3
If the Team requires help, I am only too willing to assist.
Starter templates etc should definitely be Bootstrap 5. The only time I use Bootstrap 4 is for legacy projects that were built pre Bootstrap 5. Any new projects should default to Bootstrap 5.
This is my attempt to rehash app under templates.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="ac:route" content="/">
<base href="/">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Wappler starter page">
<title>Wappler starter page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" integrity="sha384-XGjxtQfXaH2tnPFa9x+ruJTuLE3Aa6LhHSWRr1XeTyhezb4abCG4ccI5AkVDxqC+" crossorigin="anonymous" />
<!-- Custom CSS styles-->
<link rel="stylesheet" href="/css/style.css">
<!-- App Connect JavaScript -->
<script src="/dmxAppConnect/dmxAppConnect.js"></script>
<script src="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>
<script src="/dmxAppConnect/dmxBootstrap5Theme/dmxBootstrap5Theme.js" defer></script>
<script src="/dmxAppConnect/dmxFormatter/dmxFormatter.js" defer></script>
</head>
<body is="dmx-app" id="index">
<div is="dmx-bs5-theme" id="bs5theme"></div>
<dmx-datetime id="DateTime" interval="days"></dmx-datetime>
<nav class="navbar navbar-expand-lg fixed-top bg-info" data-bs-theme="light">
<div class="container">
<a class="navbar-brand" href="#">App Name</a>
<button class="navbar-toggler" type="button" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="navbar-nav w-100 justify-content-end">
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Contact</a>
<div class="nav-item" is="dmx-bs5-theme-switch" id="bs5themeswitch" manager="bs5theme"></div>
</div>
</div>
</div>
</nav>
<header class="pt-5 pb-5 position-relative">
<img class="img-fluid w-100" src="/assets/images/LaptopOnDesk.webp" alt="Banner Image" width="1680" height="533">
<div class="container position-absolute top-50 start-50 translate-middle">
<div class="row">
<div class="col-12 col-md-7 col-lg-6 pb-2 rounded-4" style="background-color: rgba(0, 0, 0, 0.5);">
<h1 class="display-2 fw-bold text-info">Awesome App</h1>
<p class="d-none d-sm-block lead fw-bold text-info"> Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
</div>
</div>
</div>
</header>
<main>
<section id="features" class="container mb-5">
<h2 class="h1 text-center mb-5 text-info">Features</h2>
<div class="row gy-4">
<div class="col-12 col-md-6 col-lg-4 text-center">
<h3 class="text-info"><i class="bi-cloud fs-1"></i> Feature 1</h3>
<p class="text-muted"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque beatae dicta dolores hic porro quam voluptatibus.</p>
</div>
<div class="col-12 col-md-6 col-lg-4 text-center">
<h3 class="text-info"><i class="bi-book fs-1"></i> Feature 2</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque beatae dicta dolores hic porro quam voluptatibus.</p>
</div>
<div class="col-12 col-md-6 col-lg-4 text-center"> <i class="fa fa-area-chart fa-4x text-muted visually-hidden" aria-hidden="true"></i>
<h3 class="text-info"><i class="bi-bar-chart-line fs-1"></i> Feature 3</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque beatae dicta dolores hic porro quam voluptatibus.</p>
</div>
<div class="col-12 col-md-6 col-lg-4 text-center">
<h3 class="text-info"><i class="bi-gear fs-1"></i> Feature 4</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque beatae dicta dolores hic porro quam voluptatibus.</p>
</div>
<div class="col-12 col-md-6 col-lg-4 text-center"> <i class="fa fa-cog fa-4x text-muted visually-hidden" aria-hidden="true"></i>
<h3 class="text-info"><i class="bi-clipboard-data fs-1"></i> Feature 5</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque beatae dicta dolores hic porro quam voluptatibus.</p>
</div>
<div class="col-12 col-md-6 col-lg-4 text-center"> <i class="fa fa-database fa-4x text-muted visually-hidden" aria-hidden="true"></i>
<h3 class="text-info"><i class="bi-database fs-1"></i> Feature 6</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque beatae dicta dolores hic porro quam voluptatibus.</p>
</div>
</div>
</section>
<section id="screenshots" class="mb-5 py-5 bg-info-subtle">
<div class="container">
<div class="row align-items-center px-lg-0 mb-5">
<div class="col-12 col-lg-4 mx-auto mb-4 order-lg-2">
<h2 class="h1 text-info">Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud officia deserunt mollit exercitation.</p>
<p>Nullam vitae scelerisque est, sed tempus metus. Donec convallis volutpat enim consequat viverra. Nam blandit est eu ipsum elementum, ac pellentesque nibh placerat. Quisque venenatis pulvinar nulla, non vestibulum urna ultrices accumsan.</p>
<button type="button" class="btn btn-info">Learn More</button>
</div>
<div class="col-12 col-lg-6 order-lg-1">
<img class="img-fluid w-100 rounded-4" src="/assets/images/Desk.webp" width="640" height="400" alt="Desktop" loading="lazy">
</div>
</div>
<div class="row align-items-center px-lg-0">
<div class="col-12 col-lg-4 mx-auto mb-4">
<h2 class="h1 text-info">Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud officia deserunt mollit exercitation.</p>
<p>Nullam vitae scelerisque est, sed tempus metus. Donec convallis volutpat enim consequat viverra. Nam blandit est eu ipsum elementum, ac pellentesque nibh placerat. Quisque venenatis pulvinar nulla, non vestibulum urna ultrices accumsan.</p>
<button type="button" class="btn btn-info">Learn More</button>
</div>
<div class="col-12 col-lg-6 order-lg-2">
<img class="img-fluid w-100 rounded-4" src="/assets/images/Meeting.webp" width="640" height="400" alt="Conferring is a critical step in reflecting on our writing" loading="lazy">
</div>
</div>
</div>
</section>
<section id="faq" class="container mb-5">
<div class="row">
<div class="col-12 col-md-4">
<h2 class="h1 text-info">FAQs</h2>
<p class="lead">Not sure how this app works?</p>
<p class="text-muted">Here are the answers to some of the most common questions we hear from our appreciated customers</p>
</div>
<div class="col-12 col-md-8">
<h3 class="h5">Cras elementum efficitur volutpat?</h3>
<p class="mt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec fringilla felis. Vestibulum consequat quam a elementum iaculis. Proin diam erat, porta eleifend lacinia ultrices.</p>
<h3 class="h5">Fusce faucibus feugiat faucibus?</h3>
<p class="mt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec fringilla felis. Vestibulum consequat quam a elementum iaculis. Proin diam erat, porta eleifend lacinia ultrices.</p>
<h3 class="h5">Fusce at mauris elementum?</h3>
<p class="mt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec fringilla felis. Vestibulum consequat quam a elementum iaculis. Proin diam erat, porta eleifend lacinia ultrices.</p>
<h3 class="h5">Ut vel augue ut neque lobortis semper?</h3>
<p class="mt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec fringilla felis. Vestibulum consequat quam a elementum iaculis. Proin diam erat, porta eleifend lacinia ultrices.</p>
</div>
</div>
</section>
</main>
<footer class="bg-info">
<div class="container p-3">
<p class="text-center mb-0 text-black">© Copyright {{DateTime.datetime.getYear(DateTime.datetime)}} - App Name</p>
</div>
</footer>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
And the images. Apologies, could not upload the .webp files.
The starter pages and templates have been updated to Bootstrap 5.
