Bootstrap Sticky Footer with max-width special container help?

HTML & CSS
1

Hi, I am building a site and require a max-width container once the page gets to a certain width but my code and the bootstrap sticky footer code do not work nicely together and was wondering if anyone can help solve my css issue.

Here is just max-width container code:

Here is code with sticky footer and max-width container:

I need a sticky footer and I also need the special container to work. Thanks so much in advance. Help much appreciated,

2

Something like this should work.

<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.row {
	background: #f8f9fa;
	margin-top: 20px;
}
.col {
	border: solid 1px #6c757d;
	padding: 10px;
}
.special-container {
	max-width: 1440px;
	margin-right: auto;
	margin-left: auto;
	background-color: #f8f9fd;
	min-height:100vh;
	display:flex;
	flex-direction:column;
}
.footer {
	margin-top:auto;
	border-top:1px solid #000;
}
</style>
</head>
<body>
<div class="special-container">
  <main role="main" class="flex-shrink-0">
    <div class="container">
      <h1>Sticky footer</h1>
      <p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
      <p>Use <a href="/docs/4.3/examples/sticky-footer-navbar/">the sticky footer with a fixed navbar</a> if need be, too.</p>
    </div>
  </main>
  <footer class="footer mt-auto py-3 bg-light">
    <div class="container"> <span class="text-muted">Place sticky footer content here.</span> </div>
  </footer>
</div>
<!-- disable this line of code to see working sticky footer --> 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
1 Like
3

Thanks so much. Works perfectly.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.