Onboarding
Bootstrap 5 Onboarding plugin
Onboarding is a guide plugin to show users how to use your website
Responsive Onboarding plugin built with the latest Bootstrap 5. It is is a guide plugin to show users how to use your website.Note: Read the API tab to find all available options and advanced customization
Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.
Basic example
To initialize Onboarding on your page simply add data-mdb-onboarding-init attribute to the container of your steps and pass options via data-mdb-attributes listed in the API tab. Options data-mdb-step, data-mdb-index and data-mdb-onboarding-content are required for every step.
Start options
Autostart
Onboarding can be auto initialized by passing data-mdb-auto-start attribute to the steps container element. You can set the amount of time after which Onboarding will be triggered using the data-mdb-start-delay attribute.
Event triggered start
Specify the element with which the user needs to interact to initiate the Onboarding by passing its selector to data-mdb-start-trigger. Action that will start Onboarding can be set via data-mdb-start-event attribute.
Backdrop options
Global backdrop
Backdrop for every step inside Onboarding can be set with data-mdb-backdrop and data-mdb-backdrop-opacity attributes.
Individual step backdrop
Individual backdrop options can be set with the same data-mdb-backdrop and data-mdb-backdrop-opacity attributes as the global backdrop settings.
Autoplay
Set data-mdb-autoplay and data-mdb-steps-duration to enable autoplay for every step inside the container.
Autoscroll
Toggle auto scrolling into element that is outside the view with data-mdb-autoscroll attribute.
Popover customization
Buttons and labels customization
Customize button styles and labels inside the step popover using specific data-mdb-attributes. For more details, refer to the API section.
Popover class
Add custom class for popovers by setting custom-class attribute and style it in your css sheet.
Container example
Gallery
