【Webフレームワークの種類】画面デザインが簡単にできるBootstrapとは

という部分がレスポンシブの書き方になります。

Bootstrapは横を12分割してレイアウトを組み立てます。
col-12と記載することで「12分割全てを使用する」という実装になります。
そのため、以下のようにdivの2つ目は行が変わり2行目に表示されるという形になります。

※画面幅を分割せず大きく使用する場合

もう1つ指定している「col-md-6」という実装は、横幅が768px以上の場合の指定になります。
768px以上の場合は「12分割中、6分割を使用する」という実装です。
つまり、「divの1つ目で6分割を使用」「divの2つ目で6分割を使用」、という実装になり横幅が768px以上のパソコンなどで見ると下記のようになります。

※画面幅を半分に分割して使用する場合

先ほどは2行で表示されていたものが1行で表示されています。
横幅が768pxに満たないスマホなどでは、2行で表示されます。
こういったように、横幅に応じてデザインしていくことで、レスポンシブ対応が可能です。

PG

レスポンシブ対応など、Bootstrapでできることはいろいろあるのですね。

PM

Bootstrapを利用するとデザインの実装の幅が広がります。他にも多く機能があるので、利用してみてください！

Bootstrapを利用するとデザインの実装の幅が広がる

BootstrapはWebアプリケーションの画面をデザインする際に、多くの機能が利用できます。
より良い画面デザインを作成することに繋がるため、Bootstrapを利用してみてはいかがでしょうか。