Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Bootstrapのナビゲーションバー(navbar)の背景色を好きな色にする方法とは?

More than 1 year has passed since last update.

やりたいこと

Bootstrap4を使って、navbarの色を好きな色に設定すること。

どうすればいいのか?

こうすればOK!
styleの#以降に好きなカラーコードを指定すればよし!

HTML
<nav class="navbar navbar-dark" style="background-color:#e3f2fd;">
・・・
</nav>

どういう仕組みか?

もともと好きな背景色にこだわらなければこう書けばOK。

HTML
<nav class="navbar navbar-dark bg-dark">
・・・
</nav>

navbar-darkまたはnavbar-lightでnavbar-darkで
「そもそもnavbarって明るめの背景=黒文字っすか?それとも暗めの背景=白文字っすか?」
と指定する。

そしてbg-の部分で背景色を決めている。
(classにbg-
って書くのがbootstrapによってラクできるところっすからね。)

このbg-**を指定せずにstyleを書けばよし!ということっすな。

参考URL
http://cccabinet.jpn.org/bootstrap4/components/navbar#navbar-bg-state

最後に

最後まで読んでいただいてありがとうございました!

実は、ナビゲーションバーの文字色も変えたいんすが、
それはまた後日ということで。
このあたりを解釈すればできるっぽいけど、まだ解釈ができてない。。。
https://torina.top/detail/172/

Twitterでフォローしていただいて応援していただけますと、
もっといろいろ書いていきますー。
https://twitter.com/pocket_ma_kun

pocket_ma_kun
エロスは地球を救うと信じるデザインエンジニア。プログラミング(フロント&バック)と動画編集で人類を労働=奴隷解放することが使命。海でのんびりしてるの好き。作ったプロダクトは下記HPから。ではではドロン!
https://twitter.com/pocket_ma_kun?lang=ja
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away