- 固定幅のコンテンツ:
固定幅のコンテンツを作成するには、
.containerクラスを使用します。以下の例は、幅が固定されたコンテンツを中央に配置する方法を示しています。
<div class="container">
<!-- ここにコンテンツを追加 -->
</div>- レスポンシブな幅のコンテンツ:
レスポンシブな幅のコンテンツを作成するには、
.container-fluidクラスを使用します。以下の例は、幅がブラウザの幅に応じて変化するコンテンツを作成する方法を示しています。
<div class="container-fluid">
<!-- ここにコンテンツを追加 -->
</div>- 幅の割合指定:
要素の幅を割合で指定するには、
.w-*クラスを使用します。*の部分には、1から100までの数字を入れて、幅の割合を指定します。以下の例は、幅が50%の要素を作成する方法を示しています。
<div class="w-50">
<!-- ここにコンテンツを追加 -->
</div>- 幅のオートマチック指定:
要素の幅を自動的に調整するには、
.w-autoクラスを使用します。以下の例は、幅が自動的に調整される要素を作成する方法を示しています。
<div class="w-auto">
<!-- ここにコンテンツを追加 -->
</div>- 幅の非表示:
要素を非表示にするには、
.d-noneクラスを使用します。以下の例は、要素を非表示にする方法を示しています。
<div class="d-none">
<!-- ここにコンテンツを追加 -->
</div>以上がBootstrapの幅ユーティリティのいくつかの使用例です。これらのクラスを利用することで、要素の幅を柔軟に制御することができます。詳細な情報については、Bootstrapの公式ドキュメントを参照してください。