• 12 hours
  • Medium

Free online content available in this course.



Got it!

Last updated on 9/3/20

Get some practice upgrading your website with custom themes and functionality

Log in or subscribe for free to enjoy all this course has to offer!

It's your turn

The Space School site has launched!

They've started getting feedback from their users and marketing department, and they want you to make enhancements to the site.


The first tasks are to make some changes to the carousel. You can review the documentation page for the Bootstrap carousel to find guidance on how to make the requested changes. These are the changes that you need to implement:

  • The default carousel interval (the time between slide transitions) is five seconds. It needs to be changed to 3.5 seconds.

  • The next requirement is to add indicators to the carousel to help users know how many slides there are and where they are in the sequence.


You have a requirement to add a breadcrumb component to the Lesson Details page of the Space School site. The following image shows the placement and style of the new component.

The design of the Lesson Details page for the Space School website, with a breadcrumb component. The main content includes the breadcrumb, the lesson title; a lesson video and an overview of the lesson’s details.
The Lesson Details page showing the breadcrumb component

Your task is to review the Bootstrap 4 Breadcrumb component and implement it at the top of the Lesson Details page as shown in the image above.

Make sure that, you also:

  • Use the Bootstrap spacing classes to give the new component adequate spacing, including adjusting the spacing of neighboring components if needed.

  • Override the default breadcrumb separator so that the vertical bar “|” character is used.

Check your work!

Check the following elements:

For the carousel:

  • The slide interval is 3.5 seconds.

  • The slide indicators should be displayed and be highlighted according to the displayed slide.

  • The carousel interval requirement could be met by either:

    • Adding a  data-interval  attribute to the carousel, or

    • Using the  javascript .carousel(options)  method to set the interval.

For the breadcrumb:

  • The Bootstrap utility classes are used to create adequate spacing around the component.

  • The default Bootstrap breadcrumb separator should be overridden by overriding the default Sass variable.

Example of certificate of achievement
Example of certificate of achievement