You can doing this by just overriding the styles on the carousel-indicators list items.

Here's a typical indicators section:

<ul class=carousel-indicators>

  <li data-target=#myCarousel data-slide-to=0 class=active>One</li>

  <li data-target=#myCarousel data-slide-to=1>Two</li>

  <li data-target=#myCarousel data-slide-to=2>Three</li>

</ul>

You'll want to override some of the default Bootstrap styles:

Convert the display from dots to rectangles by adding a width and height and removing the border-radius:

Then get the text back by removing the negative text-indent added by Bootstrap:

Finally, add your own background and border and style however else you like.

The full styling should look like this:

.carousel-indicators > li,

.carousel-indicators > li.active{

    width: 100px;

    height: 25px;

    border-radius: 0;

    border: solid 1px grey;

    background: lightgrey;

    text-indent: 0;

}

.carousel-indicators > li.active {

    background: white;

}

Working Demo in Fiddle

You could even wrap the entire bit of CSS inside of a media query so that when screen size became limited, you defaulted back to the dots instead of awkwardly stacking the list items:

@media screen and (min-width: 550px) {

    /* Wrap CSS Here */

}

Responsive Demo in Fiddle