Mohammad A. answered • 02/19/20
Tutor
5.0
(126)
Professional Web Developer with 10+ years of experience
The easiest way to create a responsive page with a responsive footer is to use the Bootstrap css library.
Learn more about Bootstrap here: https://getbootstrap.com/docs/4.4/getting-started/introduction/
The following code is a functional responsive page with a responsive footer:
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<title>Responsive Footer Template</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body class="d-flex flex-column h-100">
<!-- Begin page content -->
<main role="main" class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Responsive footer</h1>
<p class="lead">This is a responsive page. It will adjust its contents according to the page width.</p>
</div>
</main>
<footer class="footer mt-auto py-3 bg-info">
<div class="container">
<span class="text-white">Responsive footer content here.</span>
</div>
</footer>
</body>
</html>
Please let me know if you have any other queries.
