at backyard

Color my life with the chaos of trouble.

BootstrapのBorder spinner (ローディングスピナー) が動かないときにチェックすること(Bootstrap v4)

f:id:shinshin86:20210720074601p:plain

Bootstrap(v4)の下記のページを参考にしてBorder spinnerを表示させようとした際、そのままコードをコピペしただけでは動かなかった。

getbootstrap.com

本来ここに表示されているコードをそのままコピペするだけで動くはずだが、コピペしてもローディングスピナーは表示されない。

はて?と疑問に思ったが、読み込んでいるBootstrapのversionが古かったのが原因のようだ。

下記は読み込んでいるBootstrapのバージョンを修正した際のdiff。

diff --git a/public/index.html b/public/index.html
--- a/public/index.html
+++ b/public/index.html
@@ -26,8 +26,8 @@
     -->
     <link
       rel="stylesheet"
-      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
-      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
       crossorigin="anonymous"
     />
     <script

このようにv4の最新版( こちら )のversionのBootstrapを読み込むようにすることでローディングスピナーが表示されるようになった。