Q:

Bootstrap 4, SearchBar Absolute Center and Make it Responsive

how to center a search bar in middle of screen (horizontally and vertically between footer and navigation) in bootstrap 4 and make it responsive for mobile devices.
I tried to do this by forcing it (without bootstrap) using a custom style .centeredd.
But when I do that the footer comes top of the search bar in small mobile devices, and seems not very responsive.

<!-- Initialize Bootstrap functionality -->
// Initialize tooltip component
$(function() {
  $('[data-toggle="tooltip"]').tooltip()
})

// Initialize popover component
$(function() {
  $('[data-toggle="popover"]').popover()
})
/*
 * Masthead for nav
 */

.blog-masthead {
  background-color: #0275D8;
  -webkit-box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1);
  box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1);
}


/* Nav links */

.blog-nav-item {
  position: relative;
  display: inline-block;
  padding: 10px;
  font-weight: 500;
  color: #fff;
}

.blog-nav-item:hover,
.blog-nav-item:focus {
  color: #fff;
  text-decoration: none;
}


/* Active state gets a caret at the bottom */

.blog-nav .active {
  color: #fff;
}

.blog-nav .active:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -5px;
  vertical-align: middle;
  content: " ";
  border-right: 5px solid transparent;
  border-bottom: 5px solid;
  border-left: 5px solid transparent;
}

* {
  border-radius: 0 !important;
}

* {
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 0 !important;
}


/*
 * Blog name and description
 */


/*
 * Footer
 */

.blog-footer {
  padding: 40px 0;
  color: #999;
  text-align: center;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
}

.blog-footer p:last-child {
  margin-bottom: 0;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

section {
  padding: 70px 0;
  border-bottom: 1px dotted #ccc;
}

.grid-example div[class^="col"] {
  border: 1px solid white;
  background: lightblue;
  text-align: center;
  padding-top: 8px;
  padding-bottom: 8px;
}

.jumbotron {
  background-color: lightskyblue;
}

table th {
  text-align: center;
}

.table {
  margin: auto;
  width: 50% !important;
}

.table td {
  text-align: center;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  color: #fff;
  text-align: center;
  background-color: #0275D8;
}

a {
  color: #f00;
}

a:hover {
  color: #0f0;
}
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="/favicon.ico">

  <style type="text/css">
    html,
    body {
      overflow-x: hidden;
    }
    
    .centeredd {
      position: fixed;
      top: 50%;
      left: 50%;
      /* bring your own prefixes */
      transform: translate(-50%, -50%);
    }
  </style>
  <title>Bootstrap 4 Template</title>

  <link rel="stylesheet" href="Navigation Bar.css">
  <link rel="stylesheet" href="Sticky Footer.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">

</head>

<body>

  <div class="blog-masthead col-xs-12">
    <div class="container">
      <nav class="blog-nav">
        <a class="blog-nav-item active" href="#">Home</a>
        <a class="blog-nav-item" href="#">New features</a>
        <a class="blog-nav-item" href="#">Press</a>
        <a class="blog-nav-item" href="#">New hires</a>
        <a class="blog-nav-item" href="#">About</a>
      </nav>
    </div>
  </div>
  <div class="col-lg-6 mx-auto">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-secondary" type="button">Go!</button>
      </span>
    </div>
    </div>
  </div>
  <footer class="footer">
    <div class="container">
      <span class="text">Place sticky footer content here.</span>
    </div>
  </footer>
  <!-- Bootstrap core JavaScript
    ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>

  <!-- Tether -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>

</body>

</html>

A:

how to center a search bar in middle of screen (horizontally and vertically between footer and navigation) in bootstrap 4 and make it responsive for mobile devices.

To center the search bar horizontally, you just need valid HTML (some of your HTML is currently invalid) and then you need to put your Bootstrap column into a Bootstrap row and put that into a Bootstrap container like so:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
<div class="container">
    <div class="row">
        <div class="col-lg-6 mx-auto">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search for...">
                <span class="input-group-btn">
                    <button class="btn btn-secondary" type="button">Go!</button>
                </span>
            </div>
        </div>
    </div>
</div>

To center in both horizontally and vertically, you could do this:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="blog-masthead">
        <nav class="blog-nav">
            <a class="blog-nav-item active" href="#">Home</a>
            <a class="blog-nav-item" href="#">New features</a>
            <a class="blog-nav-item" href="#">Press</a>
            <a class="blog-nav-item" href="#">New hires</a>
            <a class="blog-nav-item" href="#">About</a>
        </nav>
    </div>

    <div class="row align-items-center" style="min-height: calc(100vh - 66px);">
        <div class="col-lg-6 mx-auto">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search for...">
                <span class="input-group-btn">
                    <button class="btn btn-secondary" type="button">Go!</button>
                </span>
            </div>
        </div>
    </div>

    <footer class="footer fixed-bottom text-center">
        <span class="text">Place sticky footer content here.</span>
    </footer>
</div>

So, you put everything into one single .container and then add something like style="min-height: calc(100vh - 66px);" to the main content row to define height. 
100vh means 100% viewport height and then you are subtracting the number of pixels taken up by the header/nav (I used 66px in this example). 
align-items-center class on the row center aligns the contents vertically. 
And fixed-bottom on the footer gives you a sticky footer.

