Css code is not applied to page with bootstrap-CodePudding

I added my css file in html after bootstrap and my css is not aaplied to the page. What is the reason? I wan't to add hide-card class to the divs, but it is not working, even when I try to change simple background adding !important nothing happend.

HTML:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <link rel="stylesheet" href="dashboard.css">
    <title>Dashboard</title>
    </head>
    <body>
    <nav >
      <div >
        <a href="admin-dashboard.php" >BOOKWARM</a>
        <form >
          <!--search-->
          <input  type="search" placeholder="Search books.." id="search-box" aria-label="Search">
          <button  id="search" type="button"><i ></i></button>
        </form>
        <div >
        <button  type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
          <i ></i>
        </button>
        <ul  aria-labelledby="dropdownMenuButton2">
          <li><a  href="#">Action</a></li>
          <li><a  href="#">Another action</a></li>
          <li><a  href="#">Something else here</a></li>
          <li><hr ></li>
          <li><a  href="#">Separated link</a></li>
        </ul>
      </div>
      </div>
    </nav>
    <a  data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Link with href
</a>

<!-- card --->
<div  tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div >
    <div >
      <img src="./image/avatar.jpg"  alt="">
      <h4 > Welcome, Joe</h4>
    </div>
  </div>
  <div >
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div >
      <button  type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul  aria-labelledby="dropdownMenuButton">
        <li><a  href="#">Action</a></li>
        <li><a  href="#">Another action</a></li>
        <li><a  href="#">Something else here</a></li>
      </ul>
      </div>
    </div>
  </div>

  <!--Daily Top -->
  <div >
    <div >
      <h1>Top Books Today </h1>
      <div >
        <button >
          <i ></i>
        </button>
        <button >
          <i ></i>
        </button>
      </div>
    </div>
    <!--first card-->
      <div >
      <div  style="width: 18rem;">
      <img  src="..." alt="Card image cap">
      <div >
      <h5  id="">Card title</h5>
      <p >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" >Go somewhere</a>
      </div>
      </div>
      <!--scd card-->
        <div  style="width: 18rem;">
      <img  src="..." alt="Card image cap">
      <div >
      <h5 >Card title</h5>
      <p >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" >Go somewhere</a>
      </div>
      </div>
      <!--third card-->
        <div  style="width: 18rem;">
      <img  src="..." alt="Card image cap">
      <div >
      <h5 >Card title</h5>
      <p >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" >Go somewhere</a>
      </div>
      </div>
    </div>
    
  </div>


      <div  id="results">
      
      </div>

      
    
    <script src="app.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  </body>
</html>

CSS:

body{
    overflow: auto !important;
}
.sidebar-nav{
    width: 270px;
    transform:none;
    visibility: visible !important;
    top: 62px;
    height: calc(100%-62px);
    color: white !important;
}
.user-display{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.name{
    margin: 3px;
}
.profile-picture{
    width: 130px;
    height: 130px;
    border-radius: 50%;
}
.hide-cards{
    visibility: hidden !important;
}
.book-cover{
    align-items: center;
}
.book-card{
    margin-left: 280px;
}
.top-today{
    margin-left: 280px;
}
#text{
    font-size: 250px;
}

 @media (min-width: 992px) {
     body {
         overflow: auto !important;
     } 
     .offcanvas-backdrop::before{
         display: none;
     }
 }

CodePudding user response：

try to correct your path to <link rel="stylesheet" href="./dashboard.css">, or <link rel="stylesheet" href="../dashboard.css">. Typically, your problem has to do with the file location path.

CodePudding user response：

Here u didn't add hide-cards class to the bootstrap cards that's why the style are not applied to the cards.