Aims - Expected outcomes- Key concepts - Instructions Bootstrap JS Components

Aims

The purpose of this module is to learn various Bootstrap components  without writing a single line of JS code

Expected outcomes

Upon completion of this module, you should know / should be able to:

Submodule 10.1 Tabs and Tabbed Navigation

• • explain what tabbed navigation is
  • Design a tabbed navigation for your content
  • Use tab panes to organize the content and navigate the content using tabbed navigation
  • Apply custom CSS to style the tabs

Submodule 10.2 Accordion

• • Explain the functionality of an accordion
  • Use the collapse plugin to hide/reveal content
  • Construct an accordion using cards

Submodule 10.3 Revealing Content

• • Explain the functionality of the tooltip and the modal

  • Set up a tooltip to be displayed when the user hovers over an area of the page

  • Add modal that is revealed when the user clicks on a link or a button in the web page

Submodule 10.4 Carousel

• • Explain the functionality of the carousel
  • Add a carousel component in your web page
  • Configure the carousel CSS rules
  • Add controls to the carousel to manually control it

Key concepts

• Tabbed Navigation
• Accordion
• Tooltip
• Modal
• Carousel

Instructions

In order to complete this module, you have to:

• Study the resources provided for the 4 submodules
• Test your knowledge by answering the Practice set on this module’s content
• Implement and submit the assignment on this module’s content
• Reflect if the outcomes of this Module have been achieved
• Give us feedback on this module’s content

The estimated time to complete these activities is 4 hours