最終更新日: 2021年2月13日
Bootstrapでタブの色を変更する方法をサンプルコード付き解説！
Bootstrapでは簡単にタブ切り替えが実装できます。しかしタブの色はデフォルトではBootstrapで青色と決められています。この記事ではBootstrapでタブの色を変更する方法をサンプルコード付きで解説しています。
コンテンツ [表示]
Bootstrapではタブ切り替えができる機能をクラス等を指定するだけで簡単に実装することができます。
しかしこちらのタブはデフォルトでは青色のタブしか用意されていません。
今回はこの青色のタブを自分の好きな色に変更する方法を紹介したいと思います。
Bootstrapでタブの色を変更する方法
早速、タブの色を変更する方法をサンプルコードを使って解説します。
とは言っても簡単で下記のコードでタブの色を変更することができます。
/* タブの色変更 */
.nav-pills .nav-link.active{
background-color: red;
}
/* タブの文字色変更 */
.nav-pills .nav-link{
color: red;
}タブの背景色はBootstrapで.nav-pills .nav-link.activeセレクタで青色に指定されています。
このセレクタの記述を自作のCSSで上書きするようにすれば、青色から赤色に変更することができます。もちろん、赤色だけでなく自分の好きな色を指定することができます。
背景色の変更に合わせて、選択されていないタブの文字色も.nav-pills .nav-linkセレクタで変更します。選択されているタブの背景色と違う色ももちろん指定できますが、同じ色にしておくのが無難でしょう。
以上でタブの色を変更することができました。最後にHTMLも記述したサンプルコードを載せておくので是非参考にしてください。
