font-weight-boldが効かない。Bootstrapで一部変更が反映されない時の対処法。

css

CSSのフレームワークといえば、Bootstrapが有名です。
フレームワークといってもstyleを定義したクラスがまとまったファイルを参照しているようなことです。

初めはドキュメントを参照しながらスタイルを反映させるのですが、慣れてくれば
記憶と雰囲気から使えるので効率的にコードが書けます。

ただ、バージョンによって定義されたクラスが変化することがあるので、
部分的にスタイルが反映されない時は、確認する必要があります。

「font-weight-bold」が効かない

「font-weight-bold」が効かないのはバージョンが原因です。

https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css

Bootstrap 4.3.Xを使用しているユーザも多いと思います。

cdnで確認してみると、

.font-weight-bold {
  font-weight: 700 !important;
}

とありますが、bootstrap5系では、この記述はありません。

https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.css

bootstrap5系では、「font-weight-bold」が
「fw-bold」に変更されています。

.fw-bold {
  font-weight: 700 !important;
}

他にも変更点がたくさんあるので、気をつけて使っていきましょう。

Bootstrap5系は、脱jQuery

Bootstrapを使いたいが、jQueryに依存しているため、導入できない方も
5系なら使えると導入する方も多いと思います。

ただ、4系からアップデートする人は注意が必要ですね。
変更点もあるので、レイアウトが崩れることも。。

おわりに

yarnを使ってBootstrapを入れたらなぜか、5系が入っていました。。。
意識せずに入れてしまったことに反省です。
既に正式版はリリースされたものの、私のプロジェクトにはなぜかbeta版w

とりあえず、開発中のサービスはIEサポート外となりました。

コメント

タイトルとURLをコピーしました