Please wait...
Page is loading

Wizard

BS4 theme wizard is a fancy BS Tab navigation .

Getting started

To use BS4 alerts simply include bs4 theme in your bundle file 

//= require vendor/bootstrap-4.4.1-iplan-theme.bundle

Default behaviour

BS4 theme wizard's initial implementation is similar to BS tabs, but you need to make several changes to the structure and attributes.

  • add the class .nav-wizard
  • and the class .nav-wizard-steps-x (x is the number of steps the wizard contains)
  • add the attribute data-nav-wizard-active-step=x (x represents the active step)
  • each nav-link should contain a div with the class .nav-indicator
  • you can add the class .done to .nav-indicator and the step will be marked with a check icon
Sizing & limitations
All steps will have equal width and the wizard will expand to fill its entire container.
The wizard is limited to 5 steps cause more steps will not fit small screens, that's why it's recommended to add .text-nowrap and .text-truncate to the step's text
View only navigation
tabs navigation isn't implemented so you cant navigate by clicking on each step
step 2
Navigation with links
not tabs navigation
step 2 
.mb-4.text-center
  %h5.mb-0
    View only navigation
  .small.text-muted
    tabs navigation isn't implemented so you cant navigate by clicking on each step

%ul.nav.nav-wizard.nav-wizard-steps-5#nav-wizard{data: {'nav-wizard-active-step': 3}}
  %li.nav-item
    .nav-link
      .nav-indicator.done
      .small.text-muted.text-nowrap.text-truncate afsdsfgd df gsdg dfs
  %li.nav-item
    .nav-link
      .nav-indicator.done
      .small.text-muted.text-nowrap.text-truncate afsdfs
  %li.nav-item
    .nav-link
      .nav-indicator
      .small.text-muted.text-nowrap.text-truncate afsdfs
  %li.nav-item
    .nav-link
      .nav-indicator
      .small.text-muted.text-nowrap.text-truncate afsdfs
  %li.nav-item
    .nav-link
      .nav-indicator
      .small.text-muted.text-nowrap.text-truncate afsdfs

.text-center.border.p-3.mt-3.bg-light
  step 2

%hr

.mb-4.text-center
  %h5.mb-0
    Navigation with links
  .small.text-muted
    not tabs navigation

%ul.nav.nav-wizard.nav-wizard-steps-4#nav-wizard{data: {'nav-wizard-active-step': 2}}
  %li.nav-item
    =link_to 'javascript:alert("this is a link, you can implement your own remote link")', class: 'nav-link' do
      .nav-indicator.done
      .small.text-muted.text-nowrap.text-truncate afsdsfgd df gsdg dfs
  %li.nav-item
    =link_to 'javascript:alert("this is a link, you can implement your own remote link")', class: 'nav-link' do
      .nav-indicator
      .small.text-muted.text-nowrap.text-truncate afsdfs
  %li.nav-item
    =link_to 'javascript:alert("this is a link, you can implement your own remote link")', class: 'nav-link' do
      .nav-indicator
      .small.text-muted.text-nowrap.text-truncate afsdfs
  %li.nav-item
    =link_to 'javascript:alert("this is a link, you can implement your own remote link")', class: 'nav-link' do
      .nav-indicator
      .small.text-muted.text-nowrap.text-truncate afsdfs


.text-center.border.p-3.mt-3.bg-light
  step 2

Tabs navigation

You can use wizard with BS tabs navigation, to use as tab navigation you will need to follow BS guide lines for building tab nav

Tab navigation
you can click on each step to navigate like regular tabs
step 1
step 2
step 3
step 4
step 5
.mb-4.text-center
  %h5.mb-0
    Tab navigation
  .small.text-muted
    you can click on each step to navigate like regular tabs
%ul.nav.nav-wizard.nav-wizard-steps-5#nav-wizard{data: {'nav-wizard-active-step': 1}}
  %li.nav-item
    =link_to '#step1', class: 'nav-link active', id: 'step1-tab', 'data-toggle': 'tab' do
      .nav-indicator
      .small.text-muted.text-nowrap.text-truncate afsdsfgd df gsdg dfs
  %li.nav-item
    =link_to '#step2', class: 'nav-link', id: 'step2-tab', 'data-toggle': 'tab' do
      .nav-indicator
      .small.text-muted.text-nowrap.text-truncate afsdfs
  %li.nav-item
    =link_to '#step3', class: 'nav-link', id: 'step3-tab', 'data-toggle': 'tab' do
      .nav-indicator
      .small.text-muted.text-nowrap.text-truncate afsdfs
  %li.nav-item
    =link_to '#step4', class: 'nav-link', id: 'step4-tab', 'data-toggle': 'tab' do
      .nav-indicator
      .small.text-muted.text-nowrap.text-truncate afsdfs
  %li.nav-item
    =link_to '#step5', class: 'nav-link', id: 'step5-tab', 'data-toggle': 'tab' do
      .nav-indicator
      .small.text-muted.text-nowrap.text-truncate afsdfs

.tab-content.text-center.border.p-3.mt-3.bg-light
  .tab-pane.show.active#step1 step 1
  .tab-pane#step2 step 2
  .tab-pane#step3 step 3
  .tab-pane#step4 step 4
  .tab-pane#step5 step 5

Using a wizard inside a modal 

=button_tag 'Modal', class: 'btn btn-light', 'data-toggle': "modal", 'data-target': "#modal-wizard", type: 'button'
=button_tag 'Remote modal', class: 'btn btn-light', 'data-toggle': "remote-modal", 'data-target': "#wizard-remote-modal-1", 'data-remote-modal-url': components_remote_modal_path(wizard_step: 1), type: 'button'

.modal#modal-wizard{tabindex: '-1'}
  .modal-dialog
    .modal-content
      .modal-header
        %h5.modal-title='Modal with wizard & tabs navigation'
        =button_tag class: 'close', 'data-dismiss': 'modal', type: 'button' do
          %span ×
      .modal-body
        %ul.nav.nav-wizard.nav-wizard-steps-5#modal-nav-wizard{data: {'nav-wizard-active-step': 1}}
          %li.nav-item
            =link_to '#modal-step1', class: 'nav-link active', id: 'modal-step1-tab', 'data-toggle': 'tab' do
              .nav-indicator
              .small.text-muted.text-nowrap.text-truncate afsdsfgd df gsdg dfs
          %li.nav-item
            =link_to '#modal-step2', class: 'nav-link', id: 'modal-step2-tab', 'data-toggle': 'tab' do
              .nav-indicator
              .small.text-muted.text-nowrap.text-truncate afsdfs
          %li.nav-item
            =link_to '#modal-step3', class: 'nav-link', id: 'modal-step3-tab', 'data-toggle': 'tab' do
              .nav-indicator
              .small.text-muted.text-nowrap.text-truncate afsdfs
          %li.nav-item
            =link_to '#modal-step4', class: 'nav-link', id: 'modal-step4-tab', 'data-toggle': 'tab' do
              .nav-indicator
              .small.text-muted.text-nowrap.text-truncate afsdfs
          %li.nav-item
            =link_to '#modal-step5', class: 'nav-link', id: 'modal-step5-tab', 'data-toggle': 'tab' do
              .nav-indicator
              .small.text-muted.text-nowrap.text-truncate afsdfs

        .tab-content.text-center.border.p-3.mt-3.bg-light
          .tab-pane.show.active#modal-step1 step 1
          .tab-pane#modal-step2 step 2
          .tab-pane#modal-step3 step 3
          .tab-pane#modal-step4 step 4
          .tab-pane#modal-step5 step 5

      .modal-footer
        =link_to 'previous', 'javascript: $("#modal-nav-wizard").find(".active").parent().prev().find(".nav-link").tab("show")', class: 'btn btn-light mr-auto d-none'
        =link_to 'next', 'javascript: $("#modal-nav-wizard").find(".active").parent().next().find(".nav-link").tab("show")', class: 'btn btn-primary'

:javascript
  $('#modal-nav-wizard').on('show.bs.tab', function (event) {
    $(event.target).parent().prevAll('li').find('.nav-indicator').addClass('done');
    $(event.target).parent().nextAll('li').find('.nav-indicator').removeClass('done');
    $('.modal#modal-wizard .modal-footer a.btn-light').toggleClass('d-none', $(event.target).parent().index() === 0)
    $('.modal#modal-wizard .modal-footer a.btn-primary').toggleClass('d-none', $(event.target).parent().index() === 4)
  });
On this page