O'Reilly logo

Bootstrap 4 Site Blueprints by Ian Whitley, David Cochran, Bass Jobsen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required