あれ？offsetが効かないんだけど・・・？

どうも、ClojureのLuminusフレームワークを使ってWeb開発をしている学生です。
いつものように hiccup で

(defn home-page []
  [:div.container ;; コンテナを作って
   [:div.row.justify-content-center ;; row を作って
    [:div.col-md-4.col-sm-offset-4 ;; 12等分して左4つを空けてそこから4つ分のところに
     [:button.btn-primary "Login"]] ;; button を置いてください
    ]
   ])

として、html側で


<div class="container">
 <div class="row justify-content-center">
   <div class="col-md-4 col-md-offset-4">
     <button class="btn-primary">Login</button>
   </div>
 </div>
</div>

としてうまく動くかなーと思ったんですが、うまくセンタリングされませんでした。
結論から言うと、Bootstrap のバージョンを確認しろ 、ということです。

Bootstrap ver 3.0

上のコードでセンタリングされるようです。

Bootstrap ver 4.1

col-md-offset-4 を offset-md-4 としましょう。

具体例 (Bootstrap ver 4.1)

(defn home-page []
  [:div.container
   [:div.row.justify-content-center
    [:div.col-md-4.offset-4
     [:button.btn-primary "Login"]]
    ]
   ])

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-4 offset-4">
      <button class="btn-primary">Login</button>
     </div>
  </div>
</div>