Locked
10
Replies
10
10
Replies
Community Expert
,
In case you missed the announcement at the top of this forum page, Muse is discontinued and all product support & development has ended. Muse is not recommended for new projects.
Adobe Portfolio is free with your Creative Cloud Plan. You can be up and running in 30 minutes or less. Portfolio includes free hosting on Adobe's servers, 5 sites and unlimited pages. Also Portfolio syncs with Lightroom Albums and Behance.
Or you can do it yourself. This viewport-hugging footer layout was quickly assembled in Dreamweaver CC with Bootstrap's mobile-first framework.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Demo: Vertical center with bottom footer. </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap CSS-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
/**custom styles**/
body {
min-height: 100vh;
padding-top: 25vh;
}
.flex-grow { flex: 1; }
h2 {text-shadow: 1px 1px 1px aqua}
</style>
</head>
<body class="d-flex flex-column">
<!--BEGIN RESPONSIVE NAVBAR-->
<nav class="navbar navbar-dark navbar-expand-lg bg-info justify-content-center fixed-top"> <a class="navbar-brand" href="#"><img class="img-fluid rounded" src="https://dummyimage.com/300x65" alt="Your Logo" title="Company Logo or Brand"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
<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>
</nav>
<!--end navbar-->
<!--BEGIN MAIN CONTENT-->
<main class="container flex-grow">
<div class="row h-100">
<div class="jumbotron shadow rounded mx-auto">
<h1 class="p-2">Hello World!</h1>
<h2 class="p-2 bg-secondary text-light">Welcome to Bootstrap 4 in Dreamweaver.</h2>
<p class="p-2">This hero element is horizontally and vertically centered on screen. On short pages, the footer remains at viewport bottom.</p>
<p class="p-2"><a href="https://www.w3schools.com/bootstrap4/">Bootstrap 4 Tutorials on W3Schools</a></p>
</div>
</div>
</main><!--end main-->
<!--BEGIN FOOTER-->
<footer class="bg-info text-white mt-4">
<div class="container-fluid py-3">
<div class="row">
<div class="col-md-4 text-center">
<h5>Footer Column 1</h5>
</div>
<div class="col-md-4 text-center">
<h5>Footer Column 2</h5>
</div>
<div class="col-md-4 text-center">
<h5>Footer Column 3</h5>
</div>
</div><!--end row-->
</div><!--end container-->
</footer><!--end footer-->
<!--supporting scripts, first jQuery then Popper then Bootstrap-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
</body>
</html>
AdChoices
