Bootstrap 4 footer navigation

by Grobbert

HTML

<footer class="mainfooter" role="contentinfo">
	<div class="footer-middle">
		<div class="container">
			<div class="row">
				<div class="col-md-3 col-sm-6">
					<!--Column1-->
					<div class="footer-pad">
						<h4>Address</h4>
						<address>
							<ul class="list-unstyled">
								<li>
									City Hall<br>
									212  Street<br>
									Lawoma<br>
									735<br>
								</li>
								<li>
									Phone: 0
								</li>
							</ul>
						</address>
					</div>
				</div>
				<div class="col-md-3 col-sm-6">
					<!--Column1-->
					<div class="footer-pad">
						<h4>Popular Services</h4>
						<ul class="list-unstyled">
							<li><a href="#"></a></li>
							<li><a href="#">Payment Center</a></li>
							<li><a href="#">Contact Directory</a></li>
							<li><a href="#">Forms</a></li>
							<li><a href="#">News and Updates</a></li>
							<li><a href="#">FAQs</a></li>
						</ul>
					</div>
				</div>
				<div class="col-md-3 col-sm-6">
					<!--Column1-->
					<div class="footer-pad">
						<h4>Website Information</h4>
						<ul class="list-unstyled">
							<li><a href="#">Website Tutorial</a></li>
							<li><a href="#">Accessibility</a></li>
							<li><a href="#">Disclaimer</a></li>
							<li><a href="#">Privacy Policy</a></li>
							<li><a href="#">FAQs</a></li>
							<li><a href="#">Webmaster</a></li>
						</ul>
					</div>
				</div>
				<div class="col-md-3 col-sm-6">
					<!--Column1-->
					<div class="footer-pad">
						<h4>Popular Departments</h4>
						<ul class="list-unstyled">
							<li><a href="#">Parks and Recreation</a></li>
							<li><a href="#">Public Works</a></li>
							<li><a href="#">Police Department</a></li>
							<li><a href="#">Fire</a></li>
							<li><a href="#">Mayor and City Council</a></li>
							<li>
								<a href="#"></a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="footer-bottom">
		<div class="container">
			<div class="row">
				<div...

CSS

footer{
  color: white;
}
footer a{
  color: #bfffff;
}
footer a:hover{
  color: white;
}

.footer-bottom{
  background: #3d6277;
  padding: 2em;
}
.footer-top{
  background: #2d4958;  
}
.footer-middle{
   background: #3d6277;
  padding-top: 2em;
  color: white;
}
/**Sub Navigation**/
.subnavigation-container{
  background: #3d6277;
}
.subnavigation .nav-link{
  color: white;
  font-weight: bold;
}
.subnavigation-container{
  text-align: center;
}
.subnavigation-container .navbar{
  display: inline-block;
  margin-bottom: -6px; /* Inline-block margin offffset HACK -Gilron */
}
.col-subnav a{
  padding: 1rem 1rem;
  color: white;
  font-weight: bold;
}
.col-subnav .active{
  border-top:5px solid orange;
 background: white;
  color: black;
}

/* Credit to https://codepen.io/gcharles/pen/oxpwyL */