Breadcrumb doesn't work, the design does not appear correctly

user_19327079 0
Viewed 39

Exactly the design does not appear correctly, the code is as follows. example

<link rel="stylesheet" href="css/style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="node_modules/open-iconic/font/css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-grid.min.css">

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item active" aria-current="page">Home</li>
    </ol>
</nav>

I think that maybe could be for the library, but i have already updated it.

breadcrumbs html
1 Answers
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

nav {
    padding: 10px 16px;
  list-style: none;
  background-color: #eee;

}
ul li {
 background-color: steelblue;
 list-style: none;
 font-size: 18px;
 display: inline;
 
}
li{
   padding: 10px;
}

</style>
</head>
<body>


<nav aria-label="breadcrumb" >
    <ul class="breadcrumb" >
      <li class="breadcrumb-item active" aria-current="page" >Home</li>
      <li class="breadcrumb-item" aria-current="page" >contact</li>
    </ul>
</nav>
</body>
</html>

please check with the above code you will find out the solution.

user_193177940
Related