I just started with Bootstrap, and I cant figure out why the div goes behind the other div.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fauske Simulator</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="nofollow noreferrer noopener" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css" rel="nofollow noreferrer noopener" rel="stylesheet" />
<link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="nofollow noreferrer noopener">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="nofollow noreferrer noopener" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="../../../assets/css/style.css" rel="nofollow noreferrer noopener">
<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
</head>
<body class="main-bg" scroll="no" style="overflow: hidden">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="../../../index.html" rel="nofollow noreferrer noopener">Fauske Smiulator</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Ran noen på gata
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Ran/ran-privatperson.html" rel="nofollow noreferrer noopener">Ran en privatperson</a></li>
<li><a class="dropdown-item" href="../Ran/ran-offentlig-person.html" rel="nofollow noreferrer noopener">Ran en offentlig person</a></li>
<li><a class="dropdown-item" href="../Ran/ran-tilfeldig-gata.html" rel="nofollow noreferrer noopener">Ran en tilfeldig på gata</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Stjel en bil
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Stjel bil/stjel-bil-privatperson.html" rel="nofollow noreferrer noopener">Stjel fra en privatperson</a></li>
<li><a class="dropdown-item" href="../Stjel bil/stjel-bil-offentlig-person.html" rel="nofollow noreferrer noopener">Stjel fra en offentlig person</a></li>
<li><a class="dropdown-item" href="../Stjel bil/stjel-tilfeldig-gata.html" rel="nofollow noreferrer noopener">Stjel en tilfeldig på gata</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Stjel fra et hus
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-privat.html" rel="nofollow noreferrer noopener">Stjel fra et privat hus</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-offentlig.html" rel="nofollow noreferrer noopener">Stjel fra en offentlig byggning</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-gata.html" rel="nofollow noreferrer noopener">Stjel noe på gata</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-butikk.html" rel="nofollow noreferrer noopener">Stjel noe på fra en butikk</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Narkotika
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="narkotika-traphouse.html" rel="nofollow noreferrer noopener">Hent varer fra TrapHouse</a></li>
<li><a class="dropdown-item" href="narkotika-miks.html" rel="nofollow noreferrer noopener">Miks rusmidlene dine</a></li>
<li><a class="dropdown-item" href="narkotika-ansett.html" rel="nofollow noreferrer noopener">Ansette dealere</a></li>
<li><a class="dropdown-item" href="narkotika-selg-gata.html" rel="nofollow noreferrer noopener">Selg på gaten</a></li>
</ul>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 profile-menu">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-user"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"><i class="fas fa-user fa-fw"></i> Min profil</a></li>
<li><a class="dropdown-item" href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"><i class="fas fa-sliders-h fa-fw"></i> Account</a></li>
<li><a class="dropdown-item" href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"><i class="fas fa-cog fa-fw"></i> Settings</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"><i class="fas fa-sign-out-alt fa-fw"></i> Log Out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div id="div-innpakning">
<div class="border-info border-3 border-top side-navbar active-nav d-flex justify-content-between flex-wrap flex-column navbar-dark bg-dark" id="sidebar">
<ul class="nav flex-column text-white w-100">
<a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" class="nav-link h3 align-self-center text-white my-2">
Lager
</a>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-coins fa-fw"></i> Penger: </li>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-car fa-fw"></i> Biler </li>
</li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-box-open fa-fw"></i> Ting </li>
</li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-pills fa-fw"></i> Narkotika </li>
</li>
</ul>
</div>
<div class="border border-3 d-flex" id="info">
<p>h</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="../../../js/navbar.js"></script>
<script src="../../../js/sidebar.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>Picture of website.
https://prnt.sc/1y8001u
The gray border goes behind the other div. Thats the problem.
How i want it.
https://prnt.sc/1y806jh
I want the div to be centered, not from start, but from the border-right on the sidebar and all the way right.
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
add the row class in and add to the child div the col class according to the desired configuration, more information about Grid System, you can check inhttps://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fauske Simulator</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24464b4b50575056455464110a140a14094641504516">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
<link href="https://cdn.jsdelivr.net/npm/<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa9895829399959489bac8d4cad4cf">[email protected]</a>/css/boxicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0b2bfbfa4a3a4a2b1a090e5fee0fee2">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="../../../assets/css/style.css">
<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
</head>
<body class="main-bg" scroll="no" style="overflow: hidden">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="../../../index.html">Fauske Smiulator</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Ran noen på gata
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Ran/ran-privatperson.html">Ran en privatperson</a></li>
<li><a class="dropdown-item" href="../Ran/ran-offentlig-person.html">Ran en offentlig person</a></li>
<li><a class="dropdown-item" href="../Ran/ran-tilfeldig-gata.html">Ran en tilfeldig på gata</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Stjel en bil
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Stjel bil/stjel-bil-privatperson.html">Stjel fra en privatperson</a></li>
<li><a class="dropdown-item" href="../Stjel bil/stjel-bil-offentlig-person.html">Stjel fra en offentlig person</a></li>
<li><a class="dropdown-item" href="../Stjel bil/stjel-tilfeldig-gata.html">Stjel en tilfeldig på gata</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Stjel fra et hus
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-privat.html">Stjel fra et privat hus</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-offentlig.html">Stjel fra en offentlig byggning</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-gata.html">Stjel noe på gata</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-butikk.html">Stjel noe på fra en butikk</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Narkotika
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="narkotika-traphouse.html">Hent varer fra TrapHouse</a></li>
<li><a class="dropdown-item" href="narkotika-miks.html">Miks rusmidlene dine</a></li>
<li><a class="dropdown-item" href="narkotika-ansett.html">Ansette dealere</a></li>
<li><a class="dropdown-item" href="narkotika-selg-gata.html">Selg på gaten</a></li>
</ul>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 profile-menu">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-user"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#"><i class="fas fa-user fa-fw"></i> Min profil</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-sliders-h fa-fw"></i> Account</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-cog fa-fw"></i> Settings</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt fa-fw"></i> Log Out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div id="div-innpakning" class="row">
<div class="col-3 border-info border-3 border-top side-navbar active-nav d-flex justify-content-between flex-wrap flex-column navbar-dark bg-dark" id="sidebar">
<ul class="nav flex-column text-white w-100">
<a href="#" class="nav-link h3 align-self-center text-white my-2">
Lager
</a>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-coins fa-fw"></i> Penger: </li>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-car fa-fw"></i> Biler </li>
</li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-box-open fa-fw"></i> Ting </li>
</li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-pills fa-fw"></i> Narkotika </li>
</li>
</ul>
</div>
<div class="col border border-3" id="info">
<p>h</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2d20203b3c3b3d2e3f0f7a617f617f622d2a3b2e7d">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="../../../js/navbar.js"></script>
<script src="../../../js/sidebar.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="60020f0f14131412011020554e504e52">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>Method 2
The sidebar had a position: absolute; Therefor the other div went behind the sidebar.
I made the sidebar and the other div to not collide.
Whole code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fauske Simulator</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="197b76766d6a6d6b7869592c37293729347b7c6d782b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
<link href="https://cdn.jsdelivr.net/npm/<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98faf7e0f1fbf7f6ebd8aab6a8b6ad">[email protected]</a>/css/boxicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10727f7f64636462716050253e203e22">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="../../../assets/css/style.css">
</head>
<body onload="randomran()" class="main-bg" scroll="no" style="overflow: hidden">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="../../../index.html">Fauske Smiulator</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Ran noen på gata
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="ran-privatperson.html">Ran en privatperson</a></li>
<li><a class="dropdown-item" href="ran-offentlig-person.html">Ran en offentlig person</a></li>
<li><a class="dropdown-item" href="ran-tilfeldig-gata.html">Ran en tilfeldig på gata</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Stjel en bil
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Stjel bil/stjel-bil-privatperson.html">Stjel fra en privatperson</a></li>
<li><a class="dropdown-item" href="../Stjel bil/stjel-bil-offentlig-person.html">Stjel fra en offentlig person</a></li>
<li><a class="dropdown-item" href="../Stjel bil/stjel-tilfeldig-gata.html">Stjel en tilfeldig på gata</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Stjel fra et hus
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-privat.html">Stjel fra et privat hus</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-offentlig.html">Stjel fra en offentlig byggning</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-gata.html">Stjel noe på gata</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-butikk.html">Stjel noe på fra en butikk</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Narkotika
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Narkotika/narkotika-traphouse.html">Hent varer fra TrapHouse</a></li>
<li><a class="dropdown-item" href="../Narkotika/narkotika-miks.html">Miks rusmidlene dine</a></li>
<li><a class="dropdown-item" href="../Narkotika/narkotika-ansett.html">Ansette dealere</a></li>
<li><a class="dropdown-item" href="../Narkotika/narkotika-selg-gata.html">Selg på gaten</a></li>
</ul>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 profile-menu">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-user"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#"><i class="fas fa-user fa-fw"></i> Min profil</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-sliders-h fa-fw"></i> Account</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-cog fa-fw"></i> Settings</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt fa-fw"></i> Log Out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div id="div-innpakning" class="d-flex flex-row">
<div class="">
<div class="col-3 border-info border-3 border-top side-navbar active-nav d-flex justify-content-between flex-wrap flex-column navbar-dark bg-dark" id="sidebar">
<ul class="nav flex-column text-white w-100">
<a href="#" class="nav-link h3 align-self-center text-white my-2">
Lager
</a>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-coins fa-fw"></i> Penger: </li>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-car fa-fw"></i> Biler </li>
</li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-box-open fa-fw"></i> Ting </li>
</li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-pills fa-fw"></i> Narkotika </li>
</li>
</ul>
</div>
</div>
<div class="col d-flex justify-content-center align-content-center" id="info">
<div id="info01" class="border border-3 w-50 h-50 d-flex align-content-center shadow-lg p-3 mb-5 bg-body rounded flex-column">
<p class="fs-1 text-center">Ran en privatperson.</p>
<div class="align-self-center justify-content-center">
<p class="fs-2 text-center">Hvem vil du rane?</p>
<div class="align-self-center">
</div>
</div>
<button onclick="randomran()" id="finn_ran" type="button" class="btn btn-secondary w-50 align-self-center">Finn ransoffer - Pris: 500kr</button>
<p id="ranoffer" class="align-self-center"></p>
<p class="fs-5 align-self-center" id="sjanse"></p>
<p class="fs-5 align-self-center" id="penger_nivå"></p>
<div class="form-check align-self-center">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" onclick="våpen()">
<label class="form-check-label" for="flexCheckDefault">
Vil du bruke et våpen? - Pris: 2 000kr
</label>
</div>
<button onclick="utfør_ran()" id="utfør_ran" type="button" class="btn btn-secondary w-50 align-self-center">Utfør ran</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7c1e1313080f080e1d0c3c49524c524c511e19081d4e">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="../../../js/navbar.js"></script>
<script src="../../../js/sidebar.js"></script>
<script src="../../../js/script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92f0fdfde6e1e6e0f3e2d2a7bca2bca0">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body><script src="/node_modules/moment/moment.js"></script>
<p id="lagre"></p>
<p id="lagre01"></p>
<p id="lagre02"></p>
</html>Only the div:
<div class="col d-flex justify-content-center align-content-center" id="info">
<div id="info01" class="border border-3 w-50 h-50 d-flex align-content-center shadow-lg p-3 mb-5 bg-body rounded flex-column">
<p class="fs-1 text-center">Ran en privatperson.</p>
<div class="align-self-center justify-content-center">
<p class="fs-2 text-center">Hvem vil du rane?</p>
<div class="align-self-center">
</div>
</div>
<button onclick="randomran()" id="finn_ran" type="button" class="btn btn-secondary w-50 align-self-center">Finn ransoffer - Pris: 500kr</button>
<p id="ranoffer" class="align-self-center"></p>
<p class="fs-5 align-self-center" id="sjanse"></p>
<p class="fs-5 align-self-center" id="penger_nivå"></p>
<div class="form-check align-self-center">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" onclick="våpen()">
<label class="form-check-label" for="flexCheckDefault">
Vil du bruke et våpen? - Pris: 2 000kr
</label>
</div>
<button onclick="utfør_ran()" id="utfør_ran" type="button" class="btn btn-secondary w-50 align-self-center">Utfør ran</button>
</div>
</div>The div with id “info” covers the whole page, but doesnt go over the sidebar and navbar. Then the div with id “info01” is placed in the middle of the info div.
CSS:
#info {
min-height: 100%;
padding-top: 5%;
}The body is min-height 100vh.
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0