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.

Save, compile, and refresh. Our new Font Awesome icons should take their appropriate places.

Now, we can move on to aesthetic enhancements.

Let's add some top and bottom padding to the .carousel element itself and add our @gray-lighter color for a background color. To help keep track of my work, I'm going to tack on a small comment at the end of each added or edited line. (Again, these will never make it to CSS!)

.carousel {
  position: relative;
  padding-top: 4px; // added
  padding-bottom: 28px; // added
  background-color: @gray-lighter; // added
}

After saving and compiling, you'll see the light gray background appears in our newly created space above and below the carousel images. This provides a bit of framing to set them off from the other elements above and below. In a bit, we'll take advantage of the extra bottom padding to position our carousel indicators in a way that allows them to stand out much more clearly.

First, let's ensure that our images will stretch to fill their space in all circumstances.

We need to force our images to stretch the full width of the carousel, even in wide screens. Our images are 1600px wide to fill most screens. But beyond this width, they will leave a gap at the right edge.

Forcing the images to their full width on windows wider than 1600px may pixelate them slightly; but for images that are large enough, distortions won't be huge.

For now, we need to add only two lines to our file. Just below the rules for the .carousel selector are the nested set of rules we need for this. Under the .carousel-inner selector are rules for carousel images, including a mixin which ensures they behave responsively and adjust to smaller screens. We can also force them to stretch wider for wider screens by setting min -width:.

.carousel-inner {
  ...
  > .item {
    ... 
    > img,
    > a > img {
      .img-responsive();
      line-height: 1;
      min-width: 100%; // added
    }
  }
  ...
}

After implementing this adjustment, we can stretch our browser window as wide as we like, and the image will stretch along with it.

Next, we need to limit the maximum height of our carousel.

As you may have noticed, the carousel grows entirely too tall in the medium and large screen view. Our mock-ups call for a constrained height of approximately 440px. We can accomplish this easily by setting a constraint on the parent of our images, the .carousel-inner > .item, as follows:

.carousel-inner {
  ...
  > .item {
    ... 
    max-height: 640px; // added

Because the .carousel-inner element has a rule of overflow: hidden, which constrains the height of the .item element, it serves as a convenient way to hide the lower portions of the image when it grows beyond the desired height.

Having done this, we can use nested media queries (another nice feature of LESS), along with Bootstrap's medium and large breakpoint variables to adjust the vertical positioning of our images at the widest widths, to keep our designs in the focal area. I'll do it by using the following code:

> img,
> a > img {
  ...
  @media (min-width: @screen-md-min) {
    margin-top: -40px;
  }
  @media (min-width: @screen-lg-min) {
    margin-top: -60px;
  }
}

Save, compile, and refresh. You should see that our carousel is taking shape nicely and works well from narrow to wide viewport widths.

At a narrow width, it appears like the following:

And in a wide viewport, it looks like the following:

Now, to style the carousel indicators.

The carousel indicators serve to inform the user how many slides are in our carousel, and highlight the current spot in the rotation. At present, these indicators are barely visible—languishing near the bottom center edge of our portfolio images.

Let's move these indicators into their own space, just below the image:

This brings our desired result. The indicators now stay positioned in the desired space across all screen dimensions.

Now, let's update their appearance to make them larger and easier to see.

We'll make our carousel indicators more visible by using our gray variables. We'll also increase their size a bit. We can get a start in our _variables.less file.

At present, this has the effect of making all but the active item invisible.

Now, for some work in _carousel.less.

Carousel adjustments accomplished! We've learned a lot in the process—a lot about Bootstrap and perhaps a little about LESS as well.

Let's move on to the next section. What's remaining is considerably simpler.