Bootstrap, centering image vertically and horizontally with sticky footer

Question

I am having trouble trying to center an image both horizontally and vertically, using Bootstrap and a sticky footer. It needs to be fluid, responsive and work on both desktops and mobiles.. I don't want the footer to go over the image if the window/screen size is too small (obviously).

Any help or insight would be great appreciated!

Here's what I've got..

404.php

<html lang="en">
 <head>
  <title>Error 404</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  <title>Error 404</title>

  <!-- Bootstrap -->
  <link href="/assets/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles -->
  <link href="/assets/css/sticky-footer.css" rel="stylesheet">
  <link href="/assets/css/custom.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
 </head>

<body>

<div class="container-fluid">
 <div class="panel-default">
  <div class="panel-body">
   <div class="text-center top"><h2>Error 404</h2>
   </div>

   <div class="form-group text-center">
     <h4>Nothing to see here, nothing to see</h4>
     <img src="/assets/images/404.jpg" class="img-responsive center-block">
   </div>

  </div>
 </div>
</div>

<footer class="footer">
 <div class="container">
  <p class="text-muted text-center">
   <small>&copy; 2015</small>
  </p>
 </div>
</footer>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

</body>
</html>

sticky-footer.css

/* Sticky footer styles */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 40px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 40px;
}

score 1 · Answer 1 · edited May 23 '17 at 12:23

Sticky bottom footer

Bootstrap has a navbar that I find is useful for footers. Try using navbar navbar-default navbar-fixed-bottom instead of your custom footer class.

Center vertically

This question has a lot of great information regarding centering vertically. This is what I use:

.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

Center horizontally

I've found the easiest solution to centering horizontally is just using center-block. Hasn't failed me yet.

score 0 · Answer 2 · edited May 23 '17 at 11:59

I would suggest you have a loook at this stackoverflow question first.

This might also get you started (change it in your sticky-footer.css):

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 40px;
  display: table;  /*<<<< this line was added*/
}
.container {  
  height: 100%;
  display: table-cell;   
  vertical-align: middle;    
}
.cent {
  margin: 0 25% auto 25%; 
}

Add the class cent to you paragraph in your webpage, i.e.:

  <p class="cent text-muted text-center">
   <small>&copy; 2015</small>
  </p>

Bootstrap, centering image vertically and horizontally with sticky footer

2 Answers2