Bootstrap

Bootstrap2020年9月22日

Bootstrapの機能を使っていい感じに文章を改行するTips

こんにちは。オザサです。みなさま、サイトを作る時には何を使っていますか？やはりレスポンシブなサイトを作るとなると、Bootstrapを使う機会も多いのではないでしょうか？今回はBootstrap(4.1)の機能を活用したTipsを共有します。解決したい課題大きめな画面だと改行がいい感じになっているけど、スマホなどの画面だとちょっと改行が不自然なんてことありますよね。解決方法 BootstrapのDisplay propertyを活用すると解決が可能です。 Display propertyはclassに付記することで使用できます。実際には下記のような記述をします。 .d-{breakpoint}-{value} for sm, md, lg, and xl. https://getbootstrap.com/docs/4.1/utilities/display/ なお、Bootstrap4.1におけるbreakpointは下記のようになっています。 // Extra small devices (portrait phones, less than 576