Creating Interactivity with JavaScript Based Bootstrap 4 Components
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.
What you'll learn
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.
Table of contents
- Version Check 0m
- 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
- 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