Home > Software design >  Bootstrap 5 - Div goes behing another div
Bootstrap 5 - Div goes behing another div

Time：11-03

I just started with Bootstrap, and I cant figure out why the div goes behind the other div...

My 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev nYRRuWlolflfl" crossorigin="anonymous" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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">
    <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="#" 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]/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>
</html>

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.

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev nYRRuWlolflfl" crossorigin="anonymous" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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/[email protected]/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>
</html>

Page link：https//www.codepudding.com/Softwaredesign/177376.html

Prev:How to set loop.index as a variable in Jinja
Next:declare in css file height and color fully but in index.html file it does not display as designed
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding