Creating Interactivity with JavaScript Based Bootstrap Components

By Jeff Batt
Go beyond just static Bootstrap components and learn to use Bootstrap components that can be enhanced with JavaScript. Each component has various options you can adjust, methods you can use, and events that can trigger custom code.
Play course overview
Course info
Rating
(16)
Level
Intermediate
Updated
Sep 1, 2020
Duration
2h 39m
Table of contents
Course Overview
Course Overview 2m
Getting Started with Javascript-based Components
Module Introduction 1m Exploring the Sample Project Files 4m Preparing for Bootstrap 5 2m Exploring JavaScript Enabled Components 1m Understanding Options, Methods and Events 3m Building Basic Dropdown Buttons 5m Stylizing the Dropdown Button 5m Using JavaScript with Dropdowns 8m Module Conclusion 1m
Exploring Bootstrap Message Components
Module Introduction 1m Creating and Positioning Tooltips 4m Adjusting Tooltip Options 6m Exploring Popover Basics 4m Adding Popover Options 3m Using Tooltip & Popover Methods & Events 10m Notifying the User with Toasts 7m Using Toasts Options & Methods 5m Module Conclusion 1m
Displaying Content with Collapse, Carousel, and ScrollSpy
Module Introduction 1m Building Basic Collapses 3m Building an Accordion 7m Using JavaScript with Collapse 7m Creating a Basic Image Carousel 4m Enhancing Carousels with Indicators and Captions 7m Adjusting Carousel Options 4m Controlling the Carousel with Methods & Events 8m Setting up the Scrollspy with List Group 6m Adding Scrollspy Options, Methods and Events 4m Module Conclusion 1m
Understanding the Modal Component
Module Introduction 1m Creating the Modal 5m Adjusting the Layout Settings 4m Adjusting the Size of the Modal 4m Adjusting Modal Options 3m Controlling the Modal with Methods 5m Listening for Modal Events 3m Reusing Modals 7m Where to Go from Here 3m Module Conclusion 1m
Description
Course info
Rating
(16)
Level
Intermediate
Updated
Sep 1, 2020
Duration
2h 39m
Description

Static Bootstrap components are fantastic, but they do not engage the end-user. What if you needed to engage your user by customizing or extending components? In this course, Creating Interactivity with JavaScript Based Bootstrap Components, you’ll learn to create and extend JavaScript enabled components using various options, methods, and events. First, you’ll explore how to show additional content when a learner clicks on a button. Next, you’ll discover how to message and alert the user through popovers, toasts, and more. After that, you’ll explore how to present content in various engaging ways like carousels and ScrollSpy. Finally, you’ll learn how to present additional interactivity inside modals, which extends the content you can have on a page. When you’re finished with this course, you’ll have the skills and knowledge of working with more interactive components available in Bootstrap needed to make your web pages more engaging for your end-users.

About the author
Jeff Batt
About the author

Jeff has 10+ years experience in the digital learning and media industry. Currently he is Founder and Head Trainer/Sensei at Learning Dojo, a company dedicated to training you to become a software ninja in a variety of eLearning, web, and mobile related software applications.

More from the author
Creating Responsive Pages with CSS FlexBox
Intermediate
1h 21m
May 1, 2020
JavaScript Arrays and Collections
Beginner
1h 57m
Dec 31, 2019
More courses by Jeff Batt
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone, my name is Jeff Batt, and welcome to my course, Creating Interactivity with JavaScript Based Bootstrap Components. I am the head trainer at learningdojo.net. One of the strengths that Bootstrap has is its many default components. Some components are basic components, but others give you the adjustable options and interactive behavior. This course is all about those adjustable components. We're going to explore the components that allow us to adjust options, use default methods, and events on the component, all within JavaScript. Some of the major topics that we'll cover include messaging components, this includes tooltips, popovers, and toast components; content components, like collapses, image carousels, and scrollspys; modal component, we'll dive deep into using the modal component to display additional content; Options, methods, and events, this will allow us to add additional interactivity to each component. By the end of this course, you'll learn how to build, adjust, and customize each of these JavaScript‑enabled components. Before beginning this course, you should be familiar with the basics of HTML, CSS, and JavaScript. You should also know how to layout basic pages in Bootstrap. I hope you'll join me on this journey to learn Bootstrap JavaScript components with the Creating Interactivity with JavaScript Based Bootstrap Components course at Pluralsight.

You're the smartest person in the room

PROVE IT

Your team won't just close the skills gap

THEY'LL HURDLE IT