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.