Bootstrapの機能を使っていい感じに文章を改行するTips
YukiOzasa1 min readこんにちは。オザサです。
みなさま、サイトを作る時には何を使っていますか？
やはりレスポンシブなサイトを作るとなると、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 576px)
// No media query for \`xs\` since this is the default in Bootstrap// Small devices (landscape phones, 576px and up)
[@media](http://twitter.com/media) (min-width: 576px) { ... }// Medium devices (tablets, 768px and up)
[@media](http://twitter.com/media) (min-width: 768px) { ... }// Large devices (desktops, 992px and up)
[@media](http://twitter.com/media) (min-width: 992px) { ... }// Extra large devices (large desktops, 1200px and up)
[@media](http://twitter.com/media) (min-width: 1200px) { ... }https://getbootstrap.com/docs/4.1/layout/overview/#responsive-breakpoints
今回はスマホサイズのdisplayの時に改行したいので、「smの時のみbrタグが表示される」と表現できます。
<h1>ほにゃらら<br class="d-none d-sm-block">ほにゃらら</h1>ん〜、いい感じ。CSSをいじったりしないで記述できるのでスッキリするし読みやすいですね！
おわりに
Bootstrapのようなコンポーネントライブラリを使う時にはそもそも何ができるのか事前にある程度把握しておくと、真価を発揮できるようになるのでいいと思います！
こちらからは以上です。