Bootstrapでfont-weight-boldが適応されません

Question

###Bootstrapでfont-weight-boldが適応されません

  <style>
      .cover{
        background:url(img/th.jpeg);
        background-size:cover;
      }
    </style>
    <div class="cover text-white px-5 font-weight-bold">
      <h2>こんにちは、こんにちは、こんにちは、こんにちは、</h2>
    </div>

画像のようにfont-weight-boldが反映されません。しかしｐタグの場合は同じコードでも反映されます。
この場合、コードがたりていないのでしょうか？そもそもh2タグではfont-weight-boldは不可能なのでしょうか？

Comments

[m.ts10806]

BootStrapは4で良いでしょうか。
マイナーバージョン含めて追記してください。

[m.ts10806]

他の指定は効くか試してみてください。
https://getbootstrap.com/docs/4.0/utilities/text/
例えば
font-weight-light
font-italic

[sshino]

Bootstrap4.1.3です。

[m.ts10806]

マイナーバージョン含めて追記してください。 （質問本文へ、です）

Answer 1

親要素の設定より、Bootstrapのh2要素に設定されている規定値(font-weight: 500;)が優先されます。

h2要素にfont-weight-boldを設定してください。

<div class="cover px-5">
  <h2 class="font-weight-bold">こんにちは、こんにちは、こんにちは、こんにちは、</h2>
</div>

Comments

[m.ts10806]

確かに、こちらですね。
h系全てにfont-weight: 500;があてられてるので内側が勝ちます

[sshino]

詳しく説明していただいてありがとうございます！

Answer 2

h2に直に指定すればできます。

ちょっと根拠資料探せてないですが、ブロック要素なので、中も効かないんじゃないかなと・・・

CSSは基本あと勝ちです。
BootStrapのもとコードを確認されるとわかりますが、そもそもH系全てにfont-weightが割り当てられていますので、より内部にあるそちらが有効になります。

Comments

[sshino]

詳しく説明していただいてありがとうございます！

[m.ts10806]

どのような言語環境でも同じですが、フレームワークを利用する際は、元となるコードを読みに行けるようになっておくことも重要です。

Answer 3

わたしの環境で最新のbootstrapをダウンロードして扱ってみました。
div側ではなくh2側の指定したら画像のようになりましたがこれでは駄目でしょうか？