如何使用 CSS 将默认 Bootstrap 按钮颜色更改为我自己选择的自定义颜色？

Question

 .nav-link { font-family: "Montserrat"; font-weight: 300; font-size: 1.2rem; color: #ededed; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> <li class="nav-item"> <a class="nav-link" href="#about">about</a> </li>

Every other element in the css part is working except the color element. When i inspected the webpage in chrome developer tool, It showed that the css is not overriding the default bootstrap button color (rgba).

Answer 1

First add a new class to your element, then over writing bootstrap styles using important

 .nav-link { font-family: "Montserrat"; font-weight: 300; font-size: 1.2rem; color: #ededed; } .new-class{ /* over write */ color:red !important; font-size:30px !important; /* etc */ } .new-class:hover{ color:#000 !important; } .il-style { list-style:none !important; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> <li class="nav-item il-style"> <a class="nav-link new-class" href="#about">about</a> </li>

• Or u can call your style.css after bootstrap style without using important , but sometime you need to use it.