How To Get Bs Carousel Indicators On Different Lines

Say I wanted to have 5 on one line and 5 on the other? Using: messes up the indication order so that after it, the wrong indicator is lit up? But how else can you tell

Solution 1:

I finally figured it out, just manually applied this. (Key is top 20% and top top 27%.) (I set my indicator on top of my carousel).

<olclass="carousel-indicators"style="top:20%;height:10px;"><lidata-target="#myCarousel"data-slide-to="0"class="active"></li><lidata-target="#myCarousel"data-slide-to="1"></li><lidata-target="#myCarousel"data-slide-to="2"></li><lidata-target="#myCarousel"data-slide-to="3"></li><lidata-target="#myCarousel"data-slide-to="4"></li></ol><olclass="carousel-indicators"style="top:27%; height:10px;"><lidata-target="#myCarousel"data-slide-to="5"></li><lidata-target="#myCarousel"data-slide-to="6"></li><lidata-target="#myCarousel"data-slide-to="7"></li><lidata-target="#myCarousel"data-slide-to="8"></li><lidata-target="#myCarousel"data-slide-to="9"></li></ol>

// This is other things, you can skip reading.

I set height because under my carousel has submit button and indicator default height is so long that margin hinder the clickable area.

1 Default indicator height: clickable area in red box.

2 After set height.

ps. sorry for my horrible gramma.