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.
<section
class="border p-4 d-flex justify-content-center"
data-mdb-onboarding-init
data-mdb-start-trigger="#basic-example-starter"
data-mdb-start-event="click"
>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-3 text-center">
<button
class="btn btn-danger"
data-mdb-step
data-mdb-index="1"
data-mdb-onboarding-content="This button has just started your onboarding"
data-mdb-ripple-init
id="basic-example-starter"
>
Start onboarding
</button>
</div>
</div>
<hr />
<div class="row d-flex justify-content-center">
<!-- Card Regular -->
<div class="col-md-4">
<div class="card">
<!-- Card image -->
<img class="card-img-top" src="https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp" alt="Man in Cap and Glasses">
<a>
<div class="mask rgba-white-slight"></div>
</a>
<!-- Card content -->
<div class="card-body text-center">
<!-- Title -->
<h4 class="card-title"
data-mdb-step
data-mdb-index="2"
data-mdb-onboarding-content="This is just basic example of initial onboarding options and configurations"
>
<strong>John Doe</strong>
</h4>
<!-- Subtitle -->
<h6 class="fw-bold indigo-text py-2">Web developer</h6>
<!-- Text -->
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.
</p>
<div class="d-flex justify-content-evenly">
<!-- Facebook -->
<a href="#!" role="button">
<i class="fab fa-facebook-f fa-lg"></i>
</a>
<!-- Twitter -->
<a href="#!" role="button">
<i class="fab fa-twitter fa-lg"></i>
</a>
<!-- Google + -->
<a
href="#!"
role="button"
data-mdb-step
data-mdb-index="3"
data-mdb-onboarding-content="There is many more options in the examples below"
>
<i class="fab fa-dribbble fa-lg"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Card Regular -->
</div>
</div>
</section>
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.
<section
class="border p-4 d-flex justify-content-center"
data-mdb-onboarding-init
id="autostart-example"
>
<div class="container" >
<div class="row justify-content-center">
<div class="col-md-3 text-center">
<p>Onboarding will start in: <span id="counter">3</span></p>
</div>
</div>
<hr />
<div class="row d-flex justify-content-center">
<!-- Card Regular -->
<div class="col-md-4">
<div class="card">
<!-- Card image -->
<img
class="card-img-top"
src="https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp"
alt="Man in Cap and Glasses"
id="autostart-trigger"
data-mdb-step
data-mdb-index="1"
data-mdb-onboarding-content="Example of autostarted onboarding experience"
/>
<a>
<div class="mask rgba-white-slight"></div>
</a>
<!-- Card content -->
<div class="card-body text-center">
<!-- Title -->
<h4 class="card-title"
data-mdb-step
data-mdb-index="2"
data-mdb-onboarding-content="Pass delay time in seconds to autostart onboarding"
>
<strong>John Doe</strong>
</h4>
<!-- Subtitle -->
<h6 class="fw-bold indigo-text py-2">Web developer</h6>
<!-- Text -->
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.
</p>
<div class="d-flex justify-content-evenly">
<!-- Facebook -->
<a href="#!" role="button">
<i class="fab fa-facebook-f fa-lg"></i>
</a>
<!-- Twitter -->
<a href="#!" role="button">
<i class="fab fa-twitter fa-lg"></i>
</a>
<!-- Google + -->
<a
href="#!"
role="button"
data-mdb-step
data-mdb-index="3"
data-mdb-onboarding-content="Delay time will also work with other starting options"
>
<i class="fab fa-dribbble fa-lg"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Card Regular -->
</div>
</div>
</section>
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.
<section
class="border p-4 d-flex justify-content-center"
data-mdb-onboarding-init
data-mdb-start-event="mouseover"
data-mdb-start-trigger="#hover-event-trigger"
>
<div class="container" >
<div class="row justify-content-center">
<div class="col-md-3 text-center">
<button class="btn btn-danger" id="hover-event-trigger" data-mdb-ripple-init>
Hover over me to start
</button>
</div>
</div>
<hr />
<div class="row d-flex justify-content-center">
<!-- Card Regular -->
<div class="col-md-4">
<div class="card">
<!-- Card image -->
<img
class="card-img-top"
src="https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp"
alt="Man in Cap and Glasses"
data-mdb-step
data-mdb-index="1"
data-mdb-onboarding-content="You can use events such as 'click' or 'mouseover'"
/>
<a>
<div class="mask rgba-white-slight"></div>
</a>
<!-- Card content -->
<div class="card-body text-center">
<!-- Title -->
<h4 class="card-title"
data-mdb-step
data-mdb-index="2"
data-mdb-onboarding-content="You can even use 'load' event on a window element!"
>
<strong>John Doe</strong>
</h4>
<!-- Subtitle -->
<h6 class="fw-bold indigo-text py-2">Web developer</h6>
<!-- Text -->
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.
</p>
<div class="d-flex justify-content-evenly">
<!-- Facebook -->
<a href="#!" role="button">
<i class="fab fa-facebook-f fa-lg"></i>
</a>
<!-- Twitter -->
<a href="#!" role="button">
<i class="fab fa-twitter fa-lg"></i>
</a>
<!-- Google + -->
<a href="#!" role="button">
<i class="fab fa-dribbble fa-lg"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Card Regular -->
</div>
</div>
</section>
Backdrop options
Global backdrop
Backdrop for every step inside Onboarding can be set with
data-mdb-backdrop and data-mdb-backdrop-opacity attributes.
<section
class="border p-4 d-flex justify-content-center"
data-mdb-onboarding-init
data-mdb-start-trigger="#global-backdrop-trigger"
data-mdb-start-event="click"
data-mdb-backdrop="true"
data-mdb-backdrop-opacity="0.5"
>
<div class="container" >
<div class="row justify-content-center">
<div class="col-md-3 text-center">
<button class="btn btn-danger" id="global-backdrop-trigger" data-mdb-ripple-init>
Start onboarding
</button>
</div>
</div>
<hr />
<div class="row d-flex justify-content-center">
<!-- Card Regular -->
<div class="col-md-4">
<div class="card">
<!-- Card image -->
<img
class="card-img-top"
src="https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp"
alt="Man in Cap and Glasses"
data-mdb-step
data-mdb-index="1"
data-mdb-onboarding-content="Backdrop is set to false by default"
/>
<a>
<div class="mask rgba-white-slight"></div>
</a>
<!-- Card content -->
<div class="card-body text-center">
<!-- Title -->
<h4 class="card-title"
data-mdb-step
data-mdb-index="2"
data-mdb-onboarding-content="Backdrop options set in Onboarding container will be passed to each step element inside it"
>
<strong>John Doe</strong>
</h4>
<!-- Subtitle -->
<h6 class="fw-bold indigo-text py-2">Web developer</h6>
<!-- Text -->
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.
</p>
<div class="d-flex justify-content-evenly">
<!-- Facebook -->
<a href="#!" role="button">
<i class="fab fa-facebook-f fa-lg"></i>
</a>
<!-- Twitter -->
<a href="#!" role="button">
<i class="fab fa-twitter fa-lg"></i>
</a>
<!-- Google + -->
<a
href="#!"
role="button"
data-mdb-step
data-mdb-index="3"
data-mdb-onboarding-content="If you want to set global backdrop but turn it off for one step use options for individual step from the next example"
>
<i class="fab fa-dribbble fa-lg"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Card Regular -->
</div>
</div>
</section>
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.
<section
class="border p-4 d-flex justify-content-center"
data-mdb-onboarding-init
data-mdb-start-event="click"
data-mdb-start-trigger="#individual-backdrop-trigger"
>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-3 text-center">
<button class="btn btn-danger" id="individual-backdrop-trigger" data-mdb-ripple-init>
Start onboarding
</button>
</div>
</div>
<hr />
<div class="row d-flex justify-content-center">
<!-- Card Regular -->
<div class="col-md-4">
<div class="card">
<!-- Card image -->
<img
class="card-img-top"
src="https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp"
alt="Man in Cap and Glasses"
data-mdb-step
data-mdb-index="1"
data-mdb-onboarding-content="Individual step options have higher specificity than global. Setting backdrop to a single step will override its global backdrop options"
data-mdb-backdrop="true"
/>
<a>
<div class="mask rgba-white-slight"></div>
</a>
<!-- Card content -->
<div class="card-body text-center">
<!-- Title -->
<h4
class="card-title"
data-mdb-step
data-mdb-index="2"
data-mdb-backdrop="true"
data-mdb-backdrop-opacity="0.2"
data-mdb-onboarding-content="This element has backdrop with opacity 0.2"
>
<strong>John Doe</strong>
</h4>
<!-- Subtitle -->
<h6 class="fw-bold indigo-text py-2">Web developer</h6>
<!-- Text -->
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.
</p>
<div class="d-flex justify-content-evenly">
<!-- Facebook -->
<a href="#!" role="button">
<i class="fab fa-facebook-f fa-lg"></i>
</a>
<!-- Twitter -->
<a href="#!"
role="button"
data-mdb-step
data-mdb-index="3"
data-mdb-backdrop="true"
data-mdb-backdrop-opacity="0.8"
data-mdb-onboarding-content="And this element has backdrop with opacity 0.8"
>
<i class="fab fa-twitter fa-lg"></i>
</a>
<!-- Google + -->
<a href="#!"role="button">
<i class="fab fa-dribbble fa-lg"></i
></a>
</div>
</div>
</div>
</div>
<!-- Card Regular -->
</div>
</div>
</section>
Autoplay
Set data-mdb-autoplay and data-mdb-steps-duration to enable autoplay
for every step inside the container.
<section
class="border p-4 d-flex justify-content-center"
data-mdb-onboarding-init
data-mdb-start-trigger="#autoplay-starter"
data-mdb-start-event="click"
data-mdb-autoplay="true"
data-mdb-steps-duration="2"
>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-3 text-center">
<button
class="btn btn-danger"
data-mdb-step
data-mdb-index="1"
data-mdb-onboarding-content="This step has globally set duration for 2 seconds"
data-mdb-ripple-init
id="autoplay-starter"
>
Start onboarding
</button>
</div>
</div>
<hr />
<div class="row d-flex justify-content-center">
<!-- Card Regular -->
<div class="col-md-4">
<div class="card">
<!-- Card image -->
<img
class="card-img-top"
src="https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp"
alt="Man in Cap and Glasses"
/>
<a>
<div class="mask rgba-white-slight"></div>
</a>
<!-- Card content -->
<div class="card-body text-center">
<!-- Title -->
<h4
class="card-title"
data-mdb-step
data-mdb-index="2"
data-mdb-duration="4"
data-mdb-onboarding-content="This step has overriden duration with data-mdb-duration attribute set to 4 seconds"
>
<strong>John Doe</strong>
</h4>
<!-- Subtitle -->
<h6 class="fw-bold indigo-text py-2">Web developer</h6>
<!-- Text -->
<p
class="card-text"
data-mdb-step
data-mdb-index="3"
data-mdb-autoplay="false"
data-mdb-onboarding-content="This step has data-mdb-autoplay indivudally set to false. Click next or use arrow to open next step"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.
</p>
<div class="d-flex justify-content-evenly">
<!-- Facebook -->
<a href="#!" role="button">
<i class="fab fa-facebook-f fa-lg"></i>
</a>
<!-- Twitter -->
<a href="#!" role="button">
<i class="fab fa-twitter fa-lg"></i>
</a>
<!-- Google + -->
<a
href="#!"
role="button"
data-mdb-step
data-mdb-index="4"
data-mdb-duration="5"
data-mdb-onboarding-content="This step will automatically close after 5 seconds"
>
<i class="fab fa-dribbble fa-lg"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Card Regular -->
</div>
</div>
</section>
Autoscroll
Toggle auto scrolling into element that is outside the view with
data-mdb-autoscroll attribute.
Scroll from this
... to that
<section
class="border p-4 d-flex justify-content-center"
data-mdb-onboarding-init
data-mdb-start-trigger="#autoscroll-starter"
data-mdb-start-event="click"
data-mdb-autoscroll="true"
data-mdb-backdrop="true"
>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-3 text-center">
<button class="btn btn-danger" id="autoscroll-starter" data-mdb-ripple-init>
Start onboarding
</button>
</div>
</div>
<hr />
<div class="row d-flex justify-content-center">
<div class="row d-flex justify-content-center">
<div
style="margin-bottom: 150vh;"
data-mdb-step
data-mdb-index="1"
data-mdb-onboarding-content="Autoscroll is set to true by default"
>
Scroll from this
</div>
<div
data-mdb-step
data-mdb-index="2"
data-mdb-onboarding-content='To disable it for single step use <code>data-mdb-autoscroll="false"</code> attribute on that element'
>
... to that
</div>
</div>
</div>
</div>
</section>
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.
<section
class="border p-4 d-flex justify-content-center"
data-mdb-onboarding-init
data-mdb-start-trigger="#button-customization-starter"
data-mdb-start-event="click"
data-mdb-backdrop="true"
data-mdb-backdrop-opacity="0.5"
data-mdb-next-label="Right"
data-mdb-prev-label="Left"
data-mdb-skip-label="End"
data-mdb-finish-label="Close"
>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-3 text-center">
<button class="btn btn-danger" id="button-customization-starter" data-mdb-ripple-init>
Start onboarding
</button>
</div>
</div>
<hr />
<div class="row d-flex justify-content-center">
<!-- Card Regular -->
<div class="col-md-4">
<div class="card">
<!-- Card image -->
<img
class="card-img-top"
src="https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp"
alt="Man in Cap and Glasses"
data-mdb-step
data-mdb-index="1"
data-mdb-onboarding-content="Globally changed button labels"
/>
<a>
<div class="mask rgba-white-slight"></div>
</a>
<!-- Card content -->
<div class="card-body text-center">
<!-- Title -->
<h4
class="card-title"
data-mdb-step
data-mdb-index="2"
data-mdb-duration="6"
data-mdb-pause-label="Stop"
data-mdb-resume-label="Start"
data-mdb-onboarding-content="Locally changed control labels"
>
<strong>John Doe</strong>
</h4>
<!-- Subtitle -->
<h6 class="fw-bold indigo-text py-2">Web developer</h6>
<!-- Text -->
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.
</p>
<div class="d-flex justify-content-evenly">
<!-- Facebook -->
<a
href="#!"
role="button"
data-mdb-step
data-mdb-index="3"
data-mdb-next-label='<i class="fas fa-arrow-right" style="pointer-events: none"></i>'
data-mdb-prev-label='<i class="fas fa-arrow-left" style="pointer-events: none"></i>'
data-mdb-onboarding-content="You can even use our icons inside button labels!"
>
<i class="fab fa-facebook-f fa-lg" style="pointer-events: none;"></i>
</a>
<!-- Twitter -->
<a href="#!" role="button">
<i class="fab fa-twitter fa-lg"></i>
</a>
<!-- Google + -->
<a
href="#!"
role="button"
data-mdb-step
data-mdb-index="4"
data-mdb-next-label='<i class="fas fa-arrow-right" style="pointer-events: none"></i>'
data-mdb-prev-label='<i class="fas fa-arrow-left" style="pointer-events: none"></i>'
data-mdb-finish-label='<i class="fas fa-times" style="pointer-events: none"></i>'
data-mdb-btn-main="btn-outline-primary btn-rounded"
data-mdb-btn-close="btn-outline-warning btn-rounded"
data-mdb-onboarding-content="And add different button classes!"
>
<i class="fab fa-dribbble fa-lg" style="pointer-events: none;"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Card Regular -->
</div>
</div>
</section>
Popover class
Add custom class for popovers by setting custom-class attribute and style it in
your css sheet.
<section
class="border p-4 d-flex justify-content-center"
data-mdb-onboarding-init
data-mdb-start-event="click"
data-mdb-start-trigger="#popover-class-starter"
data-mdb-custom-class="custom-popover"
>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-3 text-center">
<button class="btn btn-danger" id="popover-class-starter" data-mdb-ripple-init>
Start onboarding
</button>
</div>
</div>
<hr />
<div class="row d-flex justify-content-center">
<!-- Card Regular -->
<div class="col-md-4">
<div class="card">
<!-- Card image -->
<img
class="card-img-top"
src="https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp"
alt="Man in Cap and Glasses"
data-mdb-step
data-mdb-index="1"
data-mdb-onboarding-content="Border added with custom class"
/>
<a>
<div class="mask rgba-white-slight"></div>
</a>
<!-- Card content -->
<div class="card-body text-center">
<!-- Title -->
<h4
class="card-title"
data-mdb-step
data-mdb-index="2"
data-mdb-onboarding-content="Class change is set globally for all steps inside Onboarding container"
>
<strong>John Doe</strong>
</h4>
<!-- Subtitle -->
<h6 class="fw-bold indigo-text py-2">Web developer</h6>
<!-- Text -->
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.
</p>
<div class="d-flex justify-content-evenly">
<!-- Facebook -->
<a href="#!" role="button">
<i class="fab fa-facebook-f fa-lg"></i>
</a>
<!-- Twitter -->
<a href="#!" role="button">
<i class="fab fa-twitter fa-lg"></i>
</a>
<!-- Google + -->
<a href="#!" role="button">
<i class="fab fa-dribbble fa-lg"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Card Regular -->
</div>
</div>
</section>
.custom-popover {
border: 2px solid red;
}
Container example
Gallery
<section
class="border p-4 d-flex justify-content-center"
data-mdb-onboarding-init
style="max-height: 120vh; overflow-y: auto;"
data-mdb-start-trigger="#container-starter"
data-mdb-start-event="click"
data-mdb-autoscroll="true"
>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-3 text-center">
<button
class="btn btn-danger"
data-mdb-step
data-mdb-index="1"
data-mdb-onboarding-content="Onboarding inside containers works similarly to standard Onboarding tour"
data-mdb-target="start-demo"
data-mdb-backdrop="true"
data-mdb-ripple-init
id="container-starter"
>
Watch Demo <i class="fas fa-eye"></i>
</button>
</div>
</div>
<hr />
<!-- Cards container -->
<div class="row my-4">
<!-- Card Regular -->
<div class="col-md-4">
<div class="card">
<!-- Card image -->
<img
class="card-img-top"
src="https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp"
alt="Man in Cap and Glasses"
/>
<a>
<div class="mask rgba-white-slight"></div>
</a>
<!-- Card content -->
<div class="card-body text-center">
<!-- Title -->
<h4 class="card-title"><strong>John Doe</strong></h4>
<!-- Subtitle -->
<h6 class="fw-bold indigo-text py-2">Web developer</h6>
<!-- Text -->
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.
</p>
<div class="d-flex justify-content-evenly">
<!-- Facebook -->
<a href="#!" role="button">
<i class="fab fa-facebook-f fa-lg"></i>
</a>
<!-- Twitter -->
<a href="#!" role="button">
<i class="fab fa-twitter fa-lg"></i>
</a>
<!-- Google + -->
<a href="#!" role="button">
<i class="fab fa-dribbble fa-lg"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Card Regular -->
<!-- Card Regular -->
<div class="col-md-4">
<div class="card">
<!-- Card image -->
<img
class="card-img-top"
src="https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp"
alt="Man in Cap and Glasses"
/>
<a>
<div class="mask rgba-white-slight"></div>
</a>
<!-- Card content -->
<div class="card-body text-center">
<!-- Title -->
<h4 class="card-title"><strong>Kate Smith</strong></h4>
<!-- Subtitle -->
<h6 class="fw-bold indigo-text py-2">Graphic designer</h6>
<!-- Text -->
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.
</p>
<div class="d-flex justify-content-evenly">
<!-- Facebook -->
<a href="#!" role="button">
<i class="fab fa-facebook-f fa-lg"></i>
</a>
<!-- Twitter -->
<a href="#!" role="button">
<i class="fab fa-twitter fa-lg"></i>
</a>
<!-- Google + -->
<a href="#!" role="button">
<i class="fab fa-dribbble fa-lg"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Card Regular -->
<!-- Card Regular -->
<div class="col-md-4">
<div class="card">
<!-- Card image -->
<img
class="card-img-top"
src="https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp"
alt="Man in Cap and Glasses"
/>
<a>
<div class="mask rgba-white-slight"></div>
</a>
<!-- Card content -->
<div class="card-body text-center">
<!-- Title -->
<h4 class="card-title"><strong>Natalie Code</strong></h4>
<!-- Subtitle -->
<h6 class="fw-bold indigo-text py-2">Backend developer</h6>
<!-- Text -->
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.
</p>
<div class="d-flex justify-content-evenly">
<!-- Facebook -->
<a href="#!" role="button">
<i class="fab fa-facebook-f fa-lg"></i>
</a>
<!-- Twitter -->
<a href="#!" role="button">
<i class="fab fa-twitter fa-lg"></i>
</a>
<!-- Google + -->
<a href="#!" role="button">
<i class="fab fa-dribbble fa-lg"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Card Regular -->
</div>
<!-- Cards container -->
<hr />
<h4 class="text-center my-4"
data-mdb-step
data-mdb-index="3"
data-mdb-onboarding-content="Auto scroll works too. It will even scroll window if container is bigger than it"
data-mdb-target="step-3"
data-mdb-backdrop="true"
>
Gallery
</h4>
<!-- Gallery -->
<div
class="row"
data-mdb-step data-mdb-index="4"
data-mdb-onboarding-content="And custom buttons also works"
data-mdb-target="step-4"
data-mdb-backdrop="true"
data-mdb-next-label='<i class="fas fa-chevron-right"></i>'
>
<!-- Grid row -->
<div class="my-3 row">
<!-- Grid column -->
<div class="mb-3 col-md-4">
<img
class="img-fluid"
src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain2.webp"
alt="Mountains in the Clouds"
/>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="mb-3 col-md-4">
<img
class="img-fluid"
src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain1.webp"
alt="Wintry Mountain Landscape"
/>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="mb-3 col-md-4">
<img
class="img-fluid"
src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain2.webp"
alt="Mountains in the Clouds"
/>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="my-3 row">
<!-- Grid column -->
<div
class="mb-3 col-md-4"
data-mdb-step
data-mdb-index="2"
data-mdb-duration="5"
data-mdb-onboarding-content="You can pause and resume each step. This one will close after 5 seconds"
data-mdb-target="step-2"
data-mdb-backdrop="true"
>
<img
class="img-fluid"
src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp"
alt="Yosemite National Park"
/>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="mb-3 col-md-4">
<img
class="img-fluid"
src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain1.webp"
alt="Wintry Mountain Landscape"
/>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="mb-3 col-md-4">
<img
class="img-fluid"
src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp"
alt="Yosemite National Park"
/>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Gallery -->
<!-- Cards container -->
<div class="row my-4"
data-mdb-step
data-mdb-index="5"
data-mdb-onboarding-content='Thank you for Onboarding experience with <img src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp" style="align-self-center">'
data-mdb-target="step-5"
data-mdb-step
data-mdb-backdrop="true"
>
<!-- Card Regular -->
<div class="col-md-4">
<div class="card">
<!-- Card image -->
<img
class="card-img-top"
src="https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp"
alt="Man in Cap and Glasses"
/>
<a>
<div class="mask rgba-white-slight"></div>
</a>
<!-- Card content -->
<div class="card-body text-center">
<!-- Title -->
<h4 class="card-title"><strong>John Doe</strong></h4>
<!-- Subtitle -->
<h6 class="fw-bold indigo-text py-2">Web developer</h6>
<!-- Text -->
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.
</p>
<div class="d-flex justify-content-evenly">
<!-- Facebook -->
<a href="#!" role="button">
<i class="fab fa-facebook-f fa-lg"></i>
</a>
<!-- Twitter -->
<a href="#!" role="button">
<i class="fab fa-twitter fa-lg"></i>
</a>
<!-- Google + -->
<a href="#!" role="button">
<i class="fab fa-dribbble fa-lg"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Card Regular -->
<!-- Card Regular -->
<div class="col-md-4">
<div class="card">
<!-- Card image -->
<img
class="card-img-top"
src="https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp"
alt="Man in Cap and Glasses"
/>
<a>
<div class="mask rgba-white-slight"></div>
</a>
<!-- Card content -->
<div class="card-body text-center">
<!-- Title -->
<h4 class="card-title"><strong>Kate Smith</strong></h4>
<!-- Subtitle -->
<h6 class="fw-bold indigo-text py-2">Graphic designer</h6>
<!-- Text -->
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.
</p>
<div class="d-flex justify-content-evenly">
<!-- Facebook -->
<a href="#!" role="button">
<i class="fab fa-facebook-f fa-lg"></i>
</a>
<!-- Twitter -->
<a href="#!" role="button">
<i class="fab fa-twitter fa-lg"></i>
</a>
<!-- Google + -->
<a href="#!" role="button">
<i class="fab fa-dribbble fa-lg"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Card Regular -->
<!-- Card Regular -->
<div class="col-md-4">
<div class="card">
<!-- Card image -->
<img
class="card-img-top"
src="https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp"
alt="Man in Cap and Glasses"
/>
<a>
<div class="mask rgba-white-slight"></div>
</a>
<!-- Card content -->
<div class="card-body text-center">
<!-- Title -->
<h4 class="card-title"><strong>Natalie Code</strong></h4>
<!-- Subtitle -->
<h6 class="fw-bold indigo-text py-2">Backend developer</h6>
<!-- Text -->
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.
</p>
<div class="d-flex justify-content-evenly">
<!-- Facebook -->
<a href="#!" role="button">
<i class="fab fa-facebook-f fa-lg"></i>
</a>
<!-- Twitter -->
<a href="#!" role="button">
<i class="fab fa-twitter fa-lg"></i>
</a>
<!-- Google + -->
<a href="#!" role="button">
<i class="fab fa-dribbble fa-lg"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Card Regular -->
</div>
<!-- Cards container -->
</section>
Onboarding - API
Import
import Onboarding from 'mdb-onboarding';
@import '~mdb-onboarding/css/onboarding.min.css';
Usage
Via data attributes
Using the Onboarding plugin doesn't require any additional JavaScript code - simply add
data-mdb-onboarding-init attribute to
the container of your steps
and use other data attributes to set all options.
<div data-mdb-onboarding-init data-mdb-start-trigger="#onboarding-start" data-mdb-start-event="click">
<button data-mdb-id="onboarding-start" data-mdb-step data-mdb-index="1" data-mdb-onboarding-content="Step 1">Click me</button>
<div data-mdb-step data-mdb-index="2" data-mdb-onboarding-content="Step 2">Some content</div>
<div data-mdb-step data-mdb-index="3" data-mdb-onboarding-content="Step 3">Some content</div>
</div>
Via JavaScript
<div id="js-example">
<button data-mdb-id="onboarding-start">Click me</button>
<div data-mdb-target="step-1">Some content</div>
<div data-mdb-target="step-2">Some content</div>
</div>
const options = {
steps: [
{
index: 1,
onboardingContent: '1',
target: 'step-1'
},
{
index: 2,
onboardingContent: '2',
target: 'step-2'
},
],
startTrigger: '#onboarding-start',
startEvent: 'click'
}
const myOnboarding = new Onboarding(document.getElementById('js-example'), options);
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
<div id="jquery-example">
<button data-mdb-id="onboarding-start">Click me</button>
<div data-mdb-target="step-1">Some content</div>
<div data-mdb-target="step-2">Some content</div>
</div>
const options = {
steps: [
{
index: 1,
onboardingContent: '1',
target: 'step-1'
},
{
index: 2,
onboardingContent: '2',
target: 'step-2'
},
],
startTrigger: '#onboarding-start',
startEvent: 'click'
}
$(document).ready(() => {
$('#jquery-example').onboarding(options);
});
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to
data-mdb-, as in data-mdb-next-label="".
Global
| Name | Type | Default | Description |
|---|---|---|---|
nextLabel
|
String | 'Next' |
Defines label for next step button inside popover element |
prevLabel
|
String | 'Back' |
Defines label for previous step button inside popover element |
skipLabel
|
String | 'Skip' |
Defines label for skip button inside popover element |
finishLabel
|
String | 'Finish' |
Defines label for finish button inside popover element |
pauseLabel
|
String | 'Pause' |
Defines label for pause button inside popover element when
autoPlay,stepsDuration or step duration is
set
|
resumeLabel
|
String | 'Resume' |
Defines label for resume button inside popover element when
autoPlay,stepsDuration or step duration is
set
|
btnMain
|
String | 'btn-primary' |
Set class for main button style |
btnClose
|
String | 'btn-danger' |
Set class for skip and finish buttons |
btnPause
|
String | 'btn-primary' |
Set class for pause control button |
btnResume
|
String | 'btn-success' |
Set class for resume control button |
steps
|
Array | [] |
An array of items to create step elements. Each element should contain the required
index and onboardingContent
|
startTrigger
|
String | '' |
Set selector for HTML element that will start Onboarding when
startEvent occurs.
|
startEvent
|
String | 'click' |
Set event on startTrigger element which will start Onboarding, e.g.
mouseover or click
|
autostart
|
Boolean | false |
Set Onboarding to start automatically after
startDelay seconds
|
startDelay
|
Number | 0 |
Set time in seconds after which Onboarding will start. Use it with
autoStart or startTrigger / startEvent combination
|
autoplay
|
Boolean | false |
Set automatic step change on or off. Use it in combination with
stepsDuration
|
stepsDuration
|
Number | 0 |
Set time in seconds after which each step will automatically change to next |
autoscroll
|
Boolean | true |
Defines whether window should automatically scroll into opened step position |
startIndex
|
Number | 1 |
Set index from which Onboarding will start |
debounce
|
Number | 300 |
Set time in milliseconds after which changing of steps via keyboard navigation will be possible |
backdrop
|
Boolean | false |
Set show backdrop for step popover on or off |
backdropOpacity
|
Number | 0.5 |
Set opacity for step popover backdrop element |
autoFocus
|
Boolean | false |
Set auto focusing step popover element on or off |
customClass
|
String | '' |
Adds user's custom class to popover element |
Each individual step attribute will overwrite its global counterpart behavior.
Step
| Name | Type | Default | Description |
|---|---|---|---|
nextLabel
|
String | '' |
Overwrites global nextLabel attribute for single step |
prevLabel
|
String | '' |
Overwrites global prevLabel attribute for single step |
skipLabel
|
String | '' |
Overwrites global skipLabel attribute for single step |
finishLabel
|
String | '' |
Overwrites global finishLabel attribute for single step |
pauseLabel
|
String | '' |
Overwrites global pauseLabel attribute for single step |
resumeLabel
|
String | '' |
Overwrites global resumeLabel attribute for single step |
btnMain
|
String | '' |
Overwrites global btnMain attribute for single step |
btnClose
|
String | '' |
Overwrites global btnClose attribute for single step |
btnPause
|
String | '' |
Overwrites global btnPause attribute for single step |
btnResume
|
String | '' |
Overwrites global btnResume attribute for single step |
onboardingContent
|
String | '' |
Set content for step element. Can receive HTML templates |
index
|
Number | null |
Set index number for step element |
target
|
String | null | null |
Define selector for step element when creating Onboarding via JS |
placement
|
String | 'bottom' |
Define placement of step popover. auto | top | bottom | left | right |
title
|
String | '' |
Set title for step popover element. When no title given, popover shows progress indicator |
backdrop
|
Boolean | null | null |
Overwrites global backdrop attribute for single step |
duration
|
Number | 0 |
Overwrites global stepsDuration attribute for single step |
autoplay
|
Boolean | true |
Set step autoplay attribute to false to turn off global
autoplay for this particular step
|
Methods
| Name | Parameters | Description | Example |
|---|---|---|---|
open |
index | Starts Onboarding on step set by the index key. Default is the first step. | instance.open(1) |
close |
Closes opened step popover. |
instance.close()
|
|
nextStep
|
Opens next step popover. |
instance.nextStep()
|
|
prevStep
|
Opens previous step popover. |
instance.prevStep()
|
|
pause
|
Pauses Onboarding on current step when autoplay is on. |
instance.pause()
|
|
resume |
Resumes Onboarding on current step when autoplay is on. |
instance.resume()
|
|
dispose
|
Removes the Onboarding instance. |
instance.dispose()
|
|
getInstance
|
element | Static method which allows to get the Onboarding instance associated with a DOM element. |
Onboarding.getInstance(element)
|
const onboardingElement = document.getElementById('my-onboarding');
const instance = Onboarding.getInstance(onboardingElement);
instance.open();
Events
| Name | Description |
|---|---|
start.mdb.onboarding
|
Emitted when an Onboarding has started. |
end.mdb.onboarding
|
Emitted when the last step of the Onboarding has ended. |
open.mdb.onboarding
|
Emitted when a step element has opened. |
close.mdb.onboarding
|
Emitted when a step element has closed. |
next.mdb.onboarding
|
Emitted when next step is about to be opened. |
prev.mdb.onboarding
|
Emitted when previous step is about to be opened. |
window.addEventListener('start.mdb.onboarding', () => {
alert('Onboarding has started')
});