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
Basic example
To initialize Onboarding on your page simply add .onboarding class to the
container of your steps and pass initialization options via
data-mdb-attributes Specify steps by giving proper
data-mdb-attributes with data-mdb-step,
data-mdb-index and data-mdb-onboarding-content as required minimum
<section
class="border p-4 d-flex justify-content-center onboarding"
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"
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. User can set
amount of time after which Onboarding will be trigger with
data-mdb-start-delay option
<section
class="border p-4 d-flex justify-content-center onboarding"
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
Pass to data-mdb-start-trigger selector of element on which user will trigger
data-mdb-start-event to start Onboarding.
<section
class="border p-4 d-flex justify-content-center onboarding"
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">
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 via
data-mdb-backdrop and data-mdb-backdrop-opacity attributes
<section
class="border p-4 d-flex justify-content-center onboarding"
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">
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
Indivudal backdrop options can be set with same data-mdb-backdrop and
data-mdb-backdrop-opacity attributes as with global backdrop.
<section
class="border p-4 d-flex justify-content-center onboarding"
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">
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 container
<section
class="border p-4 d-flex justify-content-center onboarding"
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"
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 onboarding"
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">
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
You can change buttons styles and labels inside step popover via proper
data-mdb-attributes. For more info visit API section
<section
class="border p-4 d-flex justify-content-center onboarding"
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">
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 onboarding"
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">
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 onboarding"
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"
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
Usage
Via data attributes
<div class="onboarding" 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'
}
$('#jquery-example').onbaording(options);
Options
Options can be passed via data attributes, JavaScript, or jQuery. For data attributes, append
the option name to data-mdb-, as in data-mdb-start-trigger. Some
attributes should be pinned directly to wrapper element and some can be used as both global or
individual step attributes.
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-main' |
Set class for main button style |
btnClose
|
String | 'btn-close' |
Set class for skip and finish buttons |
btnPause
|
String | 'btn-pause' |
Set class for pause control button |
btnResume
|
String | 'btn-resume' |
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 | '' |
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 | false |
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 miliseconds 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.6 |
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 pasueLabel 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 Onbaording 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. |
previous.mdb.onboarding
|
Emitted when previous step is about to be opened. |
window.addEventListener('start.mdb.onboarding', () => {
alert('Onboarding has started')
});
Import
MDB UI KIT also works with module bundlers. Use the following code to import this component:
import Onboarding from 'mdb-onboarding';