-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating

Bootstrap Site Blueprints

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.
Copy bootstrap/carousel.less
and save it in the less
directory as _carousel.less
.
.
Update the relevant import line in __main.less
to import our custom file in place of Bootstrap's:
@import "_carousel.less";
Customize the opening comment in _feature-carousel.less
:
// // Customized Carousel // --------------------------------------------------
Now to begin customizing!
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.
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" ...
Update the span
tags...