Bootstrap 4 が出てますね。2017.11.26 現在、まだベータ版のリリースとなっています。 当サイト iwasan.net は、Bootstrap 3 ベースで WordPress のオリジナルテーマとして作っていました。今回はひと足早く、Bootstrap 3 から Bootstrap 4 に書き換えてみましたので、ご報告します、、、

まず、先に断っておきますと、

Bootstrap 3 > 4 への書き換えは容易ではない

ということです。既定のリセット CSS も normalize.css > reboot.css に変わりマージンなどのスペースの取り方が変わってますし、クラス名の変更はざらにあり、廃止されたクラスも多数、flex は導入され、サムネイルなどのコンポーネントは廃止など、結構ダイナミックに変わってる印象でした。一部は書き換えというよりも、書き直した方が早かったですね…。

当サイトで実際に書き換えた時のポイントを幾つかご紹介しますと

• Navigation は、ほぼ一から書き直し
• Thumbnail は Card に書き換え
• label > badge に書き換え
• float を flex に書き変え
• visible-* を d-* に書き変え
• Carousel, Media は修正
• font-size を em > rem に変更
• margin, padding 全て見直し...などなど

こんなところでしょうか。
一番良い変更点は、Navigation ですね。Bootstrap 3 の Navigation は、イマイチなコードでしたから。大分すっきりして、可読性の良いコードになったと思います。

まだ触ったばかりですが、Bootstrap 4 良い感じです。コード書く量が 3 のときよりも減ると思っています。flex 周りは慣れが若干必要なので、ひと通り試しておくといいのではないでしょうか。

論より証拠。試せる方は Bootstrap 3 > 4 に書き換えてみてください。すると、レイアウトがったがたになりますので（笑）。それを1つずつ潰して、Bootstrap 4 に対応させてみましょう。

補足ですが、iPad mini4 Portrait (Safari) において、row, flex がうまく機能しない現象が発生しています。Bootstrap 4 機能してないのかな？当サイトでは、今後のバージョンアップで直ることを期待して、現状維持（放置）とします。