I am just testing some Twitter Bootstrap stuff out for a simple web app and I have run into an issue with the Carousel: the navigation buttons don't display like in examples on the bootstrap site and others I have found on the web.

I have taken this example http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=carousel and put it into this fiddle http://jsfiddle.net/a5udW/

<div class="bs-example">
<div id="myCarousel" class="carousel slide">
	<!-- Carousel indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>   
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">Slide 1</div>
        <div class="item">Slide 2</div>
        <div class="item">Slide 3</div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev"><</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">></a>
</div>

</div>

The navigation buttons are just plain old "<" and ">" in larger rectangles unlike in the example from Code Lab.

What noob thing have I done wrong?

Many thanks.

It looks like they're using the following bootstrap stylesheet in their demo:

http://www.tutorialrepublic.com/examples/css/bootstrap.min.css

By replacing it with the one in your fiddle, you get the properly stylized code.

jsFiddle

---

ProTip:

If you ever want to figure out how something is being rendered, just use Inspect Element, which will give you something like this:

From there you can toggle each of the properties to see a live demo of how they're affecting the display. You can copy the css and throw it in your own fiddle. Or you can even look to the top right of each section to see where that css is coming from, right click, select Copy Link Address and get the whole darn stylesheet. Which is all I did to answer this question. And now you can too! :)

---

Update:

Yes, this change is related to the default carousel appearance from 2.x to 3.0

2.x Carousel ->

3.0 Carousel ->

If you want to use Twitter Bootstrap 3, but style your navigation buttons like 2.0, then you can use the regular style sheet and apply the following css:

<!-- language: lang-css -->

.carousel-control {
    left: 15px;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    font-size: 60px;
    font-weight: 100;
    line-height: 30px;
    background: #222;
    border: 3px solid #fff;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
    margin-top: -20px;   
}

New Fiddle