<nav class="navbar navbar-dark bg-dark">

<div class="container-fluid">
<div class="d-flex input-group w-auto">
<input
type="search"
class="form-control rounded"
placeholder="Search"
aria-label="Search"
aria-describedby="search-addon"
/>
<span class="input-group-text text-white border-0" id="search-addon">
<i class="fas fa-search"></i>
</span>
</div>
</div>
</nav>

....................................

footer
.....................................
<footer class="bg-dark text-center text-white">
<!-- Grid container -->
<div class="container p-4">
<!-- Section: Social media -->
<section class="mb-4">
<!-- Facebook -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-facebook-f"></i
></a>

<!-- Twitter -->

<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-twitter"></i
></a>

<!-- Google -->

<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-google"></i
></a>

<!-- Instagram -->

<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-instagram"></i
></a>

<!-- Linkedin -->

<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-linkedin-in"></i
></a>

<!-- Github -->

<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-github"></i
></a>
</section>
<!-- Section: Social media -->
 <!-- Section: Form -->
<section class="">
<form action="">
<!--Grid row-->
<div class="row d-flex justify-content-center">
<!--Grid column-->
<div class="col-auto">
<p class="pt-2">
<strong>Sign up for our newsletter</strong>
</p>
</div>
<!--Grid column-->

<!--Grid column-->
<div class="col-md-5 col-12">
<!-- Email input -->
<div class="form-outline form-white mb-4">
<input type="email" id="form5Example21" class="form-control" />
<label class="form-label" for="form5Example21">Email address</label>
</div>
</div>
<!--Grid column-->

<!--Grid column-->
<div class="col-auto">
<!-- Submit button -->
<button type="submit" class="btn btn-outline-light mb-4">
Subscribe
</button>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</form>
</section>
<!-- Section: Form -->

<!-- Section: Text -->

<section class="mb-4">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt distinctio
earum
repellat quaerat voluptatibus placeat nam, commodi optio pariatur est quia
magnam
eum harum corrupti dicta, aliquam sequi voluptate quas.
</p>
</section>
<!-- Section: Text -->

<!-- Section: Links -->

<section class="">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Links</h5>

<ul class="list-unstyled mb-0">

 <li>
<a href="#!" class="text-white">Link 1</a>
</li>
<li>
<a href="#!" class="text-white">Link 2</a>
</li>
<li>
<a href="#!" class="text-white">Link 3</a>
</li>
<li>
<a href="#!" class="text-white">Link 4</a>
</li>
</ul>
</div>
<!--Grid column-->

<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Links</h5>

<ul class="list-unstyled mb-0">

<li>
<a href="#!" class="text-white">Link 1</a>
</li>
<li>
<a href="#!" class="text-white">Link 2</a>
</li>
<li>
<a href="#!" class="text-white">Link 3</a>
</li>
<li>
<a href="#!" class="text-white">Link 4</a>
</li>
</ul>
</div>
<!--Grid column-->

<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Links</h5>

<ul class="list-unstyled mb-0">

<li>
<a href="#!" class="text-white">Link 1</a>
</li>
<li>
<a href="#!" class="text-white">Link 2</a>
</li>
<li>
<a href="#!" class="text-white">Link 3</a>
</li>
<li>
<a href="#!" class="text-white">Link 4</a>
</li>
</ul>
</div>
<!--Grid column-->

<!--Grid column-->
 <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Links</h5>

<ul class="list-unstyled mb-0">

<li>
<a href="#!" class="text-white">Link 1</a>
</li>
<li>
<a href="#!" class="text-white">Link 2</a>
</li>
<li>
<a href="#!" class="text-white">Link 3</a>
</li>
<li>
<a href="#!" class="text-white">Link 4</a>
</li>
</ul>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!-- Section: Links -->
</div>
<!-- Grid container -->

<!-- Copyright -->

<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2020 Copyright:
<a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>