20
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Bootstrap4でボタンを中央寄せする方法

Last updated at Posted at 2018-02-23

はまったこと

haml
.btn.btn-info.mx-auto
   保存

という感じでボタンを中央寄せしようと思ったができない。

原因

bootstrapで.btnをつけると、displayがinline-blockとなっているため.mx-autoが効かなかった。

.btn{
    display: inline-block;
}

そのため、.d-blockクラスを追加しておけば無事中央寄せできた。

haml
.btn.btn-info.mx-auto.d-block
   保存
20
14
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?