Submodule 11.1: Bootstrap and jQuery

Bootstrap and JQuery

In this submodule, we learn about using Bootstrap's JS component methods together with JQuery and JavaScript to write JavaScript code to control the JS component. We will use the Carousel as an example of a component that can be controlled.

See more about JavaScript methods of carousel

See more about jQuery

See about jQuery on w3schools

Adding the Carousel Control Buttons

We will introduce two new buttons into the carousel component that we already included in the index.html page. To add the two buttons to the carousel, add the following code to the end of the carousel: 

Carousel HTML:

We are adding the two buttons inside a button group with the ID carouselButtons. The two buttons contain the pause and play icons to indicate their corresponding actions.

Adding CSS Class for the Buttons

Next, we add the following CSS class to styles.css file to position the buttons at the bottom-right corner of the carousel: 

Carousel CSS:

Adding JavaScript Code

Finally, we add JavaScript code to activate the buttons.

• Create in the leChocolat folder the subfolder js.
• In the subfolder js, create a new file scripts.js.
• Link ALL the HTML files with the scripts.js

Update the scripts.js with the following JavaScript code:

Carousel JS:

Do a Git commit

The above code will create a page displayed as:

Do a Git commit with the message "Bootstrap JQuery"

In this submodule, we learnt about Bootstrap's JS component methods and how they can be used together with JQuery and JavaScript to control the behavior of a Bootstrap JS component.