Styling the carousel

We're going to take Bootstrap's default carousel styles and apply some significant customization. Let's create a copy of Bootstrap's carousel.less file and make it our own.

1. Copy bootstrap/carousel.less and save it in the less directory as _carousel.less.

   .

   

2. Update the relevant import line in __main.less to import our custom file in place of Bootstrap's:

   @import "_carousel.less";

3. Customize the opening comment in _feature-carousel.less:

   //
   // Customized Carousel
   // --------------------------------------------------

Now to begin customizing!

Setting Font Awesome icons for the controls

If you unhooked Glyphicons as I did in the preceding section, you'll find that the next and previous carousel controls have disappeared. This is because they relied on Glyphicons. We can fix this using Font Awesome icons instead.

1. First, update the icons markup in index.html. Look for the links with the classes left or right and carousel-control:

   <a class="left carousel-control" ...

2. Update the span tags...