【Bootstrap】nav-pillsの色を変更する

自分用のメモでございます。

Bootstrapのnav-pillsってやつを使って、ナビゲーションメニューを配置してるんですが、これの色を変えるのに若干手間取ってしまいました。

具体的にはクリックしたとき、つまりactiveになったときのカラーリングですね。

（一番下に５個並んでるマークがナビゲーションメニュー）

しかし、この記事を見て解決。

css - bootstrap 4 change color of nav-pill active - Stack Overflow

<ul class="nav nav-pills">

  <li class="nav-item pill-1">

    <a class="nav-link active" href="#">pill one</a>

  </li>

  <li class="nav-item pill-2">

    <a class="nav-link" href="#">pill two</a>

  </li>

  <li class="nav-item pill-3">

    <a class="nav-link" href="#">pill three</a>

  </li>

</ul>

HTMLがこんな感じだったとすれば。

.pill-1 a {

    background-color: pink;

    color: yellow;

}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {

    color: #fff;

    background-color: green;

}

CSSをこんな風に書いちゃう。

すると結果はこう。

むーん、とりあえずOK。

ここまで分かれば、もうnav-pillsのカラーリングに悩むことはないでしょう。