文字の配置ユーティリティを使用サイズボタンに設定トップに戻るコンポーネントスピナーBootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。v4.2.1新設コンポーネントまたはページのロード状態を示すBootstrapのスピナーは、HTML、CSS、JavaScriptなしで完全に構築されている。概要(About)Bootstrapの"スピナー"を使用して、プロジェクトの読み込み状態が表示可能。HTMLとCSSだけで構築されているため、JavaScriptを作成する必要はない。サイズは、Bootstrapの各ユーティリティクラスで簡単にカスタマイズ可能。spinner)軽量なローディングインジケーターとして、回転型スピナーを使用。テキストカラーユーティリティで色のカスタマイズが可能。下の見本は青色の回転型スピナー。class="sr-only">Loading...</span></div>標準のスピナーでは、テキストカラーユーティリティを使用すること。ユーティリティではそれを上書きしてしまうから。spinner)回転型スピナーが気に入らない場合は、放射型スピナーに切り替え。技術的には回転しないが、繰り返し放射する。構築されているので、テキストカラーユーティリティでその外観を簡単に変更。ここでは、サポートされているバリアントとともに青色で表示。これにより簡単にサイズや色の変更、素早い調整が可能。空白(Margin)空白ユーティリティ(.m-5など)を使用すると、簡単にスペースを空けられる。位置(Placement)flexboxユーティリティ、floatユーティリティ、text-alignユーティリティを使用して、スピナーを必要な場所に正確に配置可能。追加すると、他のコンポーネント内ですばやく使用可能な小さめのスピナーが作成される。class="sr-only">Loading...</span></div>または、カスタムCSSまたはインラインスタイルを使用して、必要に応じて大きさを変更。部分は統一すること)カスタムCSS(rem単位)で大きさを設定しても可ボタンに設定(Buttons)ボタン内のスピナーを使用して、アクションが現在処理中または実行中であることを表示。スピナー要素からテキストを取り替えて、必要に応じてボタンテキストを使用することも可能。