Why bootstrap distorts the menu in CSS?-CodePudding

I have a perfect menu in HTML/CSS

My problem is that bootstrap distorts the menu when I add the link Bootstrap.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

I don't understand why I have this problem, please?

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.sidebar {
    position: fixed;
    height: 100%;
    width: 240px;
    background: #0a2558;
    transition: all 0.5s ease;
}

.sidebar.active {
    width: 60px;
}

.sidebar .logo-details {
    height: 80px;
    display: flex;
    align-items: center;
}

.sidebar .logo-details i {
    font-size: 28px;
    font-weight: 500;
    color: #fff;
    min-width: 60px;
    text-align: center;
}

.sidebar .logo-details .logo_name {
    color: #fff;
    font-size: 24px;
    font-weight: 500;
}

.sidebar .nav-links {
    margin-top: 10px;
}

.sidebar .nav-links li {
    position: relative;
    list-style: none;
    height: 50px;
}

.sidebar .nav-links li a {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.4s ease;
}

.sidebar .nav-links li a.active {
    background: #081d45;
}

.sidebar .nav-links li a:hover {
    background: #081d45;
}

.sidebar .nav-links li i {
    min-width: 60px;
    text-align: center;
    font-size: 18px;
    color: #fff;
}

.sidebar .nav-links li a .links_name {
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
}

.sidebar .nav-links .log_out {
    position: absolute;
    bottom: 0;
    width: 100%;
}

<!DOCTYPE html>
<html>
   <head>
      <title>HTML CSS JS</title>
      <!-- CSS only -->
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
      <link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet" />
   </head>
   <body>
      <div class="sidebar">
         <div class="logo-details">
            <i class="bx bxl-c-plus-plus"></i>
            <span class="logo_name">CodingLab</span>
         </div>
         <ul class="nav-links" style="width: 100% ; margin: 0 auto">
            <li>
               <a href=" # " class="active ">
               <i class="bx bx-grid-alt "></i>
               <span class="links_name ">Dashboard</span>
               </a>
            </li>
            <li>
               <a href="# ">
               <i class="bx bx-box "></i>
               <span class="links_name ">Product</span>
               </a>
            </li>
            <li>
               <a href="# ">
               <i class="bx bx-list-ul "></i>
               <span class="links_name ">Order list</span>
               </a>
            </li>
            <li>
               <a href="# ">
               <i class="bx bx-pie-chart-alt-2 "></i>
               <span class="links_name ">Analytics</span>
               </a>
            </li>
            <li>
               <a href="# ">
               <i class="bx bx-coin-stack "></i>
               <span class="links_name ">Stock</span>
               </a>
            </li>
            <li>
               <a href="# ">
               <i class="bx bx-book-alt "></i>
               <span class="links_name ">Total order</span>
               </a>
            </li>
            <li>
               <a href="# ">
               <i class="bx bx-user "></i>
               <span class="links_name ">Team</span>
               </a>
            </li>
            <li>
               <a href="# ">
               <i class="bx bx-message "></i>
               <span class="links_name ">Messages</span>
               </a>
            </li>
            <li>
               <a href="# ">
               <i class="bx bx-heart "></i>
               <span class="links_name ">Favrorites</span>
               </a>
            </li>
            <li>
               <a href="# ">
               <i class="bx bx-cog "></i>
               <span class="links_name ">Setting</span>
               </a>
            </li>
            <li class="log_out ">
               <a href="# ">
               <i class="bx bx-log-out "></i>
               <span class="links_name ">Log out</span>
               </a>
            </li>
         </ul>
      </div>
   </body>
</html>

CodePudding user response：

you can try this :

.sidebar .nav-links 
    {
              padding: 0;
    }

CodePudding user response：

You can simply add bootstrap class Maybe your problem-solve!!

.nav-links{
   padding-left:0rem;
}