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.
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:
data-intervalattribute to the carousel, or
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.