LoginSignup
10
8

More than 5 years have passed since last update.

Bootstrap 4でcarouselのindicatorを丸くする方法

Posted at

Bootstrap4ではCarousel(画像をスライドさせるやつです)のindicator(何枚目を表示してるかを示すもの)が長方形になっています。
image.png
使ってなかったので知らないのですが、Bootstrap3では丸かったらしいです。

ただ、個人的には丸くしたかったので以下のようにCSS(正確にはSCSS)を設定することで丸くしました。

$carousel-indicator-length: 10px;

.carousel-indicators {
  & li {
    border-radius: 50%;
    margin: 1px 3px;
    height: $carousel-indicator-length;
    max-width: $carousel-indicator-length;
  }
}

幅と高さを同じにしてborder-radiusで角を丸くしているだけです。
下のようになりました。
image.png

10
8
0

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
10
8