Как прижать footer к низу в bootstrap 3?

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Киномонстер Bootstrap</title>

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

    <link href="assets/css/style.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.3/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="row">
        
        <nav role="navigation" class="navbar navbar-inverse">
          <div class="container">

                <div class="navbar-header header">

                  <div class="container">

                     <div class="row">
                  
                        <div class="col-lg-12">
                          <h1> <a href="#">Киномонстер</a></h1>
                          <p>Кино - наша страсть!</p>
                        </div>
                     </div>
                   </div>
                  
                   <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                        
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                   
                    </button>

                  </div>
                 
                     <div id="navbarCollapse" class="collapse navbar-collapse navbar-right">
                  
                        <ul class="nav nav-pills">
                          <li class="active"> <a href="#">Главная</a></li>
                          <li> <a href="#">Фильми</a></li>
                          <li> <a href="#">Сериали</a></li>
                          <li> <a href="#">Рейтинг фильмов</a></li>
                          <li> <a href="#">Контакти</a></li>
                        </ul>
                     </div>
 
           </div>

        </nav>

      </div>
    </div>

    <div class="wrapper">

      <div class="container">
        
        <div class="row">

          <div class="col-lg-9"> 
          22122121212212           
          </div>
          
          <div class="col-lg-3">
          fhddhdhdhddh  
          </div>

        </div>

      </div>
    </div>

      <div class="clear">
        
      </div>
        
    <footer>
      
      <div class="container">
        <p class="text-center"> <a href="http://ru.wh-db.com">WH-DB.COM</a> </p>
      </div>

    </footer>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="assets/js/bootstrap.min.js"></script>
  </body>
</html>

bootstrap

1 ответов

В html не вижу ошибок, попробовал с этими стилями запустить - футер на месте. С CSS что-то. Вот эти стили попробуй:

.header a, a:hover {
	color: #f0ad4e;
	text-decoration: none;
}

.header h1 {
	letter-spacing: 15px;
	font-size: 300%;
}

.header p {
	color: white !important;
	font-size: 90%;
	letter-spacing: 3px;
}


.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    color: #fff;
    background-color: #346270;
}

.nav-pills>li>a {
	color: #fff;
}

.nav-pills>li>a:hover {
	background-color: #346270;
}


.navbar-inverse {
    padding: 1%;
    border-radius: 0;
}

@media (max-width: 767px) {
	.nav-pills>li {
		float: none;
	}

	.nav-pills {
		text-align: center;
	}

	.header h1 { 
	    font-size: 280%;
	    letter-spacing: 5px;
	}

	.header {
		text-align: center;
	}
} 


.clear {
	clear: both;
	height: 63px;
}

.wrapper {
	min-height: 100%;
}

html, body {
	height: 100%;
}

.films_block {
	text-align: center;
}

.films_block img {
	margin-bottom: 5%;
	border-radius: 5px;
	border: solid 5px #dad7d5;
	width: 100%;
}

.film_label {
	padding: 2%;
	margin-bottom: 4%;
}

.margin-8 {
	margin-top: 8%;
}


.panel {
	border: none;
}

.panel-body {
	background-color: #f9f9f9;
}

.panel-info>.panel-heading {
	background-color: #f0ad4e;
	color: white;
	border-color: transparent;
}

.sidebar-header {
	font-size: 120%;
	letter-spacing: 2px;
}


.form-control {
	border-radius: 0px;
}

.input-lg {
	font-size: 14px;
}

footer {
	color: #666;
	background: #222;
	padding: 17px 0 18px 0;
	border-top: 1px solid #000;
}

footer a {
	color: #999;
}

footer a:hover {
	color: #efefef;
}