Хочу выровнять элемент с классом btn-container по низу, элемент блочно-строчный. Всё как здесь. Но результата нет. Что я делаю не так?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CryMap</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/scripts/jquery-1.9.1.min.js"></script>
<script src="~/scripts/bootstrap.min.js"></script>
<script>
$(window).load(function () {
$('#videoBG').on('ended', function () {
this.load();
this.play();
});
});
</script>
<script>
function go(obj) {
var div = $(obj).find(".link");
$(div).addClass("link-anim");
}
function stop(obj) {
var div = $(obj).find(".link");
$(div).removeClass("link-anim");
}
</script>
</head>
<body>
<div id="backGroundLayer">
<video autoplay muted id="videoBG">
<source src="~/Video/BG.webm" type="video/webm" />
</video>
</div>
<div class="container-fluid">
<div class="col-sm-12" style="margin-top:20%;">
<div class="col-md-3">
<div class="tile" onmousemove="go(this)" onmouseout="stop(this)">
<h1 style="color:red;" class="header">CRYMAP #1</h1>
<p style="color:white;">X5 / KITS / CLANS / INSTACRAFT / STACK / TP</p>
<div class="btn-container">
<div class="link">
Hello world
</div>
</div>
</div>
</div>
<div class="col-md-3" onmousemove="go(this)" onmouseout="stop(this)">
<div class="tile">
<h1 style="color:red;" class="header">CRYMAP #2</h1>
<p style="color:white;">X10 / KITS / NO-CLANS / INSTACRAFT / STACK / TP</p>
<div class="btn-container">
<div class="link">
Hello world
</div>
</div>
</div>
</div>
<div class="col-md-3" onmousemove="go(this)" onmouseout="stop(this)">
<div class="tile">
<h1 style="color:#00a2ff;" class="header">ГРУППА ВК</h1>
<p style="color:white;">ТЕХ. ПОДДЕРЖКА / НОВОСТИ / ИНФО. / КОНКУРСЫ</p>
<div class="btn-container">
<div class="link">
Hello world
</div>
</div>
</div>
</div>
<div class="col-md-3" onmousemove="go(this)" onmouseout="stop(this)">
<div class="tile">
<h1 style="color:#bababb;" class="header">ГРУППА <small style="color:#bababb;">steam</small></h1>
<p style="color:white;">ТЕХ. ПОДДЕРЖКА / НОВОСТИ / ИНФО</p>
<div class="btn-container">
<div class="link">
Hello world
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
#backGroundLayer {
z-index: -1;
position: fixed;
min-width: 100%;
min-height: 100%;
overflow: no-display;
}
@font-face {
font-family: 'Code-Pro-Bold';
src: url(/fonts/Code-Pro-Bold-LC.ttf);
}
.tile {
font-family: Code-Pro-Bold;
text-align: center;
background-color: rgba(52, 59, 67, 0.82);
min-height: 250px;
max-height: 250px;
vertical-align: bottom;
}
.btn-container {
display: inline-block;
min-width: 100%;
overflow: hidden;
max-height: 30px;
padding-top: 30px;
}
.link {
background-color: #21262b;
color: white;
transition: transform 1s ease-in-out;
font-size: 22px;
height: 30px;
}
.link-anim {
transform: translate(0,-30px);
}
.header {
font-size: 50px;
margin-bottom: 0px;
}
Как видно со скрина элемент с текстом Hello World должен выровняться по низу. Но этого не происходит.