I'm trying to z-index different "containers" in bootstrap in order for them to be placed on top of each.
I've classed the different containers and provided them different z-index positions. Nothing happens.
Here is the code and the css
Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="stylesheet.css" type="text/css"></link>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-7 col">
<h1>fælælflflflflf</h1>
<p>
fkgkfklgkmnøblingbngæbkbjngækjndfælgkbjnfdækgjngfæbkjngfæbf gbkjnlfdkgbjngflkbjngfækbjnglkbnblkgjnblkgjbngflkbjgflkbjfkl
gfnæbæklkgjnbdkæjnblkjfdnblkdjngfkjbnlkjbnkgbjldkbjngklbjnkgjn
</p>
</div>
</div>
</div>
<div class="container behind">
<div class="row justify-content-center">
<div class="col-sm-7 col">
<h1>fælælflflflflf</h1>
<p>
fkgkfklgkmnøblingbngæbkbjngækjndfælgkbjnfdækgjngfæbkjngfæbf gbkjnlfdkgbjngflkbjngfækbjnglkbnblkgjnblkgjbngflkbjgflkbjfkl
gfnæbæklkgjnbdkæjnblkjfdnblkdjngfkjbnlkjbnkgbjldkbjngklbjnkgjn
</p>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
font-family: trebuchet ms;
color:#666666; }
.container {
z-index: 1;
}
.col {
margin:20px;
padding-bottom:20px;
background-color:white;
box-shadow:20px 20px 10px #0033cc;
}
.behind {
padding-bottom:40px;
z-index: 2;
}
Note: i've added some padding in order to see containers layered on top of each other.
Thanks for your reply
