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

Man in Cap and Glasses

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Edit in sandbox 
        
            
          <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

Onboarding will start in: 3

Man in Cap and Glasses

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Edit in sandbox 
        
            
            <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.

Man in Cap and Glasses

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Edit in sandbox 
        
            
            <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

Man in Cap and Glasses

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Edit in sandbox 
        
            
            <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.

Man in Cap and Glasses

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Edit in sandbox 
        
            
            <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

Man in Cap and Glasses

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Edit in sandbox 
        
            
          <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
Edit in sandbox 
        
            
          <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

Man in Cap and Glasses

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Edit in sandbox 
        
            
            <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.

Man in Cap and Glasses

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Edit in sandbox 
        
            
            <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

Man in Cap and Glasses

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Man in Cap and Glasses

Kate Smith

Graphic designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Man in Cap and Glasses

Natalie Code

Backend developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Gallery

Mountains in the Clouds
Wintry Mountain Landscape
Mountains in the Clouds
Yosemite National Park
Wintry Mountain Landscape
Yosemite National Park
Man in Cap and Glasses

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Man in Cap and Glasses

Kate Smith

Graphic designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Man in Cap and Glasses

Natalie Code

Backend developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Edit in sandbox 
        
            
          <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

Edit in sandbox 
        
            
        <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

Edit in sandbox 
        
            
        <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.

Edit in sandbox 
        
            
        <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)
Edit in sandbox 
        
            
        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.
Edit in sandbox 
        
            
          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:

Edit in sandbox 
        
            
        import Onboarding from 'mdb-onboarding';