Styling the carousel

We're going to take Bootstrap's default carousel styles and apply some significant customization. Let's create a new _scss/includes/carousel.scss file and import it into our scss/app.scss file.

Now to begin customizing and making aesthetic enhancements.

Adding top and bottom padding

Let's add some top and bottom padding to the .carousel element itself and add our @gray-lighter color for a background color:

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

After saving and reloading (run the bootstrap watch or gulp command), 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.

Now to...