The Bootstrap Stepper component allows you to easily create multi-step form wizards, perfect for guiding users through long forms, registrations, or checkout flows. It supports horizontal and vertical layouts, built-in form validation, accessibility features, and full customization.
If you’re looking for a Form Wizard in Bootstrap 5 or a flexible Stepper Component, CoreUI Stepper is the complete solution.
ExampleA simple multi-step form built with the Bootstrap Stepper. Each step displays form content and controls navigation through buttons (next, prev, finish).
<div class="stepper" data-coreui-toggle="stepper" id="myStepper">
<ol class="stepper-steps">
<li class="stepper-step">
<button type="button" class="stepper-step-button" data-coreui-toggle="step" data-coreui-target="#step-1">
<span class="stepper-step-indicator">1</span>
<span class="stepper-step-label">Step 1</span>
</button>
</li>
<li class="stepper-step">
<button type="button" class="stepper-step-button active" data-coreui-toggle="step" data-coreui-target="#step-2">
<span class="stepper-step-indicator">2</span>
<span class="stepper-step-label">Step 2</span>
</button>
</li>
<li class="stepper-step">
<button type="button" class="stepper-step-button" data-coreui-toggle="step" data-coreui-target="#step-3">
<span class="stepper-step-indicator">3</span>
<span class="stepper-step-label">Step 3</span>
</button>
</li>
</ol>
<div class="stepper-content">
<div class="stepper-pane" id="step-1">
<form class="row g-3 mb-4">
<div class="col-md-4">
<label for="horizontalStepper01" class="form-label">First name</label>
<input type="text" class="form-control" id="horizontalStepper01" value="Łukasz">
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="horizontalStepper02" class="form-label">Last name</label>
<input type="text" class="form-control" id="horizontalStepper02" value="Holeczek">
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="horizontalStepperUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">@</span>
<input type="text" class="form-control" id="horizontalStepperUsername" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
</form>
<button class="btn btn-primary" data-coreui-stepper-action="next">Next</button>
</div>
<div class="stepper-pane active show" id="step-2">
<form class="row g-3 mb-4">
<div class="col-md-6">
<label for="horizontalStepper03" class="form-label">City</label>
<input type="text" class="form-control" id="horizontalStepper03">
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3">
<label for="horizontalStepper04" class="form-label">State</label>
<select class="form-select" id="horizontalStepper04">
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3">
<label for="horizontalStepper05" class="form-label">Zip</label>
<input type="text" class="form-control" id="horizontalStepper05">
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</form>
<button class="btn btn-secondary" data-coreui-stepper-action="prev">Previous</button>
<button class="btn btn-primary" data-coreui-stepper-action="next">Next</button>
</div>
<div class="stepper-pane" id="step-3">
<form class="row g-3 mb-4">
<div class="col-md-6">
<label for="horizontalStepper06" class="form-label">Email</label>
<input type="email" class="form-control" id="horizontalStepper06">
</div>
<div class="col-md-6">
<label for="horizontalStepper07" class="form-label">Password</label>
<input type="password" class="form-control" id="horizontalStepper07">
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="horizontalStepper08">
<label class="form-check-label" for="horizontalStepper08">
Check me out
</label>
</div>
</div>
</form>
<button class="btn btn-secondary" data-coreui-stepper-action="prev">Previous</button>
<button class="btn btn-success" data-coreui-stepper-action="finish">Finish</button>
</div>
</div>
</div>Display step indicators vertically above labels using the .vertical modifier. This provides a compact and stylish layout for narrower screens or vertical designs.
<div class="stepper" data-coreui-toggle="stepper">
<ol class="stepper-steps">
<li class="stepper-step vertical">
<button type="button" class="stepper-step-button active" data-coreui-toggle="step">
<span class="stepper-step-indicator">1</span>
<span class="stepper-step-label">Step 1</span>
</button>
</li>
<li class="stepper-step vertical">
<button type="button" class="stepper-step-button" data-coreui-toggle="step">
<span class="stepper-step-indicator">2</span>
<span class="stepper-step-label">Step 2</span>
</button>
</li>
<li class="stepper-step vertical">
<button type="button" class="stepper-step-button" data-coreui-toggle="step">
<span class="stepper-step-indicator">3</span>
<span class="stepper-step-label">Step 3</span>
</button>
</li>
</ol>
</div>Use the .stepper-vertical class to build a full vertical stepper, where both indicators and step content stack vertically. Ideal for mobile-first designs or top-to-bottom flows.
<div class="stepper stepper-vertical" data-coreui-toggle="stepper">
<ol class="stepper-steps">
<li class="stepper-step">
<button type="button" class="stepper-step-button active" data-coreui-toggle="step">
<span class="stepper-step-indicator">1</span>
<span class="stepper-step-label">Step 1</span>
</button>
<div class="stepper-step-content">
<div class="py-3">
<form class="row g-3 mb-4">
<div class="col-md-4">
<label for="horizontalStepper201" class="form-label">First name</label>
<input type="text" class="form-control" id="horizontalStepper201" value="Łukasz">
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="horizontalStepper202" class="form-label">Last name</label>
<input type="text" class="form-control" id="horizontalStepper202" value="Holeczek">
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="horizontalStepper2Username" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">@</span>
<input type="text" class="form-control" id="horizontalStepper2Username" aria-describedby="inputGroupPrepend">
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
</form>
<button class="btn btn-primary" data-coreui-stepper-action="next">Next</button>
</div>
</div>
</li>
<li class="stepper-step">
<button type="button" class="stepper-step-button" data-coreui-toggle="step">
<span class="stepper-step-indicator">2</span>
<span class="stepper-step-label">Step 2</span>
</button>
<div class="stepper-step-content">
<div class="py-3">
<form class="row g-3 mb-4">
<div class="col-md-6">
<label for="horizontalStepper203" class="form-label">City</label>
<input type="text" class="form-control" id="horizontalStepper203">
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3">
<label for="horizontalStepper204" class="form-label">State</label>
<select class="form-select" id="horizontalStepper204">
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3">
<label for="horizontalStepper205" class="form-label">Zip</label>
<input type="text" class="form-control" id="horizontalStepper205">
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</form>
<button class="btn btn-secondary" data-coreui-stepper-action="prev">Previous</button>
<button class="btn btn-primary" data-coreui-stepper-action="next">Next</button>
</div>
</div>
</li>
<li class="stepper-step">
<button type="button" class="stepper-step-button" data-coreui-toggle="step">
<span class="stepper-step-indicator">3</span>
<span class="stepper-step-label">Step 3</span>
</button>
<div class="stepper-step-content">
<div class="pt-3">
<form class="row g-3 mb-4">
<div class="col-md-6">
<label for="horizontalStepper206" class="form-label">Email</label>
<input type="email" class="form-control" id="horizontalStepper206">
</div>
<div class="col-md-6">
<label for="horizontalStepper207" class="form-label">Password</label>
<input type="password" class="form-control" id="horizontalStepper207">
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="horizontalStepper208">
<label class="form-check-label" for="horizontalStepper208">
Check me out
</label>
</div>
</div>
</form>
<button class="btn btn-secondary" data-coreui-stepper-action="prev">Previous</button>
<button class="btn btn-success" data-coreui-stepper-action="finish">Finish</button>
</div>
</div>
</li>
</ol>
</div>By default, the Stepper Component behaves as a linear wizard: users must complete each step sequentially before moving to the next one.
When linear mode is enabled (linear: true), users cannot skip steps. They must finish the current form validation successfully to unlock the next step.
Use a Linear Bootstrap Stepper when you need a guided and controlled experience, such as:
<div class="stepper" data-coreui-toggle="stepper">
<ol class="stepper-steps">
<li class="stepper-step">
<button type="button" class="stepper-step-button" data-coreui-toggle="step">
<span class="stepper-step-indicator">1</span>
<span class="stepper-step-label">Step 1</span>
</button>
</li>
<li class="stepper-step">
<button type="button" class="stepper-step-button active" data-coreui-toggle="step">
<span class="stepper-step-indicator">2</span>
<span class="stepper-step-label">Step 2</span>
</button>
</li>
<li class="stepper-step">
<button type="button" class="stepper-step-button" data-coreui-toggle="step">
<span class="stepper-step-indicator">3</span>
<span class="stepper-step-label">Step 3</span>
</button>
</li>
</ol>
</div>This ensures data integrity and improves the user experience by keeping the flow focused.
Non-linear Stepper (Optional Steps)You can configure the Stepper Component to behave as non-linear, allowing users to jump freely between steps without validation restrictions. Add data-coreui-linear="false" or set linear: false to allow non-sequential navigation.
Use a Non-linear Bootstrap Stepper when users should have full control over navigation, for example:
<div class="stepper" data-coreui-linear="false" data-coreui-toggle="stepper">
<ol class="stepper-steps">
<li class="stepper-step">
<button type="button" class="stepper-step-button" data-coreui-toggle="step">
<span class="stepper-step-indicator">1</span>
<span class="stepper-step-label">Step 1</span>
</button>
</li>
<li class="stepper-step">
<button type="button" class="stepper-step-button active" data-coreui-toggle="step">
<span class="stepper-step-indicator">2</span>
<span class="stepper-step-label">Step 2</span>
</button>
</li>
<li class="stepper-step">
<button type="button" class="stepper-step-button" data-coreui-toggle="step">
<span class="stepper-step-indicator">3</span>
<span class="stepper-step-label">Step 3</span>
</button>
</li>
</ol>
</div>In non-linear mode, all steps are accessible unless explicitly disabled.
Form ValidationThe Stepper Component includes native HTML5 validation for each step. Before allowing the user to move to the next step, the associated form (if present) is validated automatically.
If a form is invalid, the stepper blocks navigation and displays validation messages.
Browser default validationThis example shows a stepper with native browser validation enabled:
<div class="stepper" data-coreui-toggle="stepper" id="validationStepper">
<ol class="stepper-steps">
<li class="stepper-step">
<button type="button" class="stepper-step-button active" data-coreui-toggle="step" data-coreui-target="#validation-step-1">
<span class="stepper-step-indicator">1</span>
<span class="stepper-step-label">Account</span>
</button>
</li>
<li class="stepper-step">
<button type="button" class="stepper-step-button" data-coreui-toggle="step" data-coreui-target="#validation-step-2">
<span class="stepper-step-indicator">2</span>
<span class="stepper-step-label">Profile</span>
</button>
</li>
</ol>
<div class="stepper-content">
<div class="stepper-pane active show" id="validation-step-1">
<form class="row g-3 mb-4">
<div class="col-md-6">
<label for="validationEmail" class="form-label">Email</label>
<input type="email" class="form-control" id="validationEmail" required>
<div class="invalid-feedback">
Please provide a valid email.
</div>
</div>
<div class="col-md-6">
<label for="validationPassword" class="form-label">Password</label>
<input type="password" class="form-control" id="validationPassword" required minlength="8">
<div class="invalid-feedback">
Password must be at least 8 characters long.
</div>
</div>
</form>
<button class="btn btn-primary" data-coreui-stepper-action="next">Next</button>
</div>
<div class="stepper-pane" id="validation-step-2">
<form class="row g-3 mb-4">
<div class="col-md-6">
<label for="validationName" class="form-label">First name</label>
<input type="text" class="form-control" id="validationName" required>
<div class="invalid-feedback">
Please provide your first name.
</div>
</div>
<div class="col-md-6">
<label for="validationLastName" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationLastName" required>
<div class="invalid-feedback">
Please provide your last name.
</div>
</div>
</form>
<button class="btn btn-secondary" data-coreui-stepper-action="prev">Previous</button>
<button class="btn btn-success" data-coreui-stepper-action="finish">Finish</button>
</div>
</div>
</div>To disable native browser styles validation and turn on custom styles, add the novalidate attribute to your forms:
<div class="stepper" data-coreui-toggle="stepper" id="novalidateStepper">
<ol class="stepper-steps">
<li class="stepper-step">
<button type="button" class="stepper-step-button active" data-coreui-toggle="step" data-coreui-target="#novalidate-step-1">
<span class="stepper-step-indicator">1</span>
<span class="stepper-step-label">Account</span>
</button>
</li>
<li class="stepper-step">
<button type="button" class="stepper-step-button" data-coreui-toggle="step" data-coreui-target="#novalidate-step-2">
<span class="stepper-step-indicator">2</span>
<span class="stepper-step-label">Profile</span>
</button>
</li>
</ol>
<div class="stepper-content">
<div class="stepper-pane active show" id="novalidate-step-1">
<form class="row g-3 mb-4" novalidate>
<div class="col-md-6">
<label for="customEmail" class="form-label">Email</label>
<input type="email" class="form-control" id="customEmail" required>
<div class="invalid-feedback">
Please provide a valid email.
</div>
</div>
<div class="col-md-6">
<label for="customPassword" class="form-label">Password</label>
<input type="password" class="form-control" id="customPassword" required minlength="8">
<div class="invalid-feedback">
Password must be at least 8 characters long.
</div>
</div>
</form>
<button class="btn btn-primary" data-coreui-stepper-action="next">Next</button>
</div>
<div class="stepper-pane" id="novalidate-step-2">
<form class="row g-3 mb-4" novalidate>
<div class="col-md-6">
<label for="customName" class="form-label">First name</label>
<input type="text" class="form-control" id="customName" required>
<div class="invalid-feedback">
Please provide your first name.
</div>
</div>
<div class="col-md-6">
<label for="customLastName" class="form-label">Last name</label>
<input type="text" class="form-control" id="customLastName" required>
<div class="invalid-feedback">
Please provide your last name.
</div>
</div>
</form>
<button class="btn btn-secondary" data-coreui-stepper-action="prev">Previous</button>
<button class="btn btn-success" data-coreui-stepper-action="finish">Finish</button>
</div>
</div>
</div>To completely skip form validation and allow free navigation between steps, add data-coreui-skip-validation="true" to the stepper:
<div class="stepper" data-coreui-toggle="stepper" data-coreui-skip-validation="true" id="skipValidationStepper">
<ol class="stepper-steps">
<li class="stepper-step">
<button type="button" class="stepper-step-button active" data-coreui-toggle="step" data-coreui-target="#skip-step-1">
<span class="stepper-step-indicator">1</span>
<span class="stepper-step-label">Account</span>
</button>
</li>
<li class="stepper-step">
<button type="button" class="stepper-step-button" data-coreui-toggle="step" data-coreui-target="#skip-step-2">
<span class="stepper-step-indicator">2</span>
<span class="stepper-step-label">Profile</span>
</button>
</li>
</ol>
<div class="stepper-content">
<div class="stepper-pane active show" id="skip-step-1">
<form class="row g-3 mb-4">
<div class="col-md-6">
<label for="skipEmail" class="form-label">Email</label>
<input type="email" class="form-control" id="skipEmail" required>
<div class="invalid-feedback">
Please provide a valid email.
</div>
</div>
<div class="col-md-6">
<label for="skipPassword" class="form-label">Password</label>
<input type="password" class="form-control" id="skipPassword" required minlength="8">
<div class="invalid-feedback">
Password must be at least 8 characters long.
</div>
</div>
</form>
<button class="btn btn-primary" data-coreui-stepper-action="next">Next</button>
</div>
<div class="stepper-pane" id="skip-step-2">
<form class="row g-3 mb-4">
<div class="col-md-6">
<label for="skipName" class="form-label">First name</label>
<input type="text" class="form-control" id="skipName" required>
<div class="invalid-feedback">
Please provide your first name.
</div>
</div>
<div class="col-md-6">
<label for="skipLastName" class="form-label">Last name</label>
<input type="text" class="form-control" id="skipLastName" required>
<div class="invalid-feedback">
Please provide your last name.
</div>
</div>
</form>
<button class="btn btn-secondary" data-coreui-stepper-action="prev">Previous</button>
<button class="btn btn-success" data-coreui-stepper-action="finish">Finish</button>
</div>
</div>
</div>Validation is fully automatic, no extra JavaScript is needed.
Accessibility (A11Y)The CoreUI Stepper Component is built with accessibility in mind:
role="tab") and attributes like aria-selected, aria-controls, and tabindex.stepper-pane) use role="tabpanel" and are properly linked to their trigger buttons.aria-live="polite".Thanks to these features, your form wizard will be fully compliant with WCAG and modern accessibility standards without additional work.
Keyboard SupportThe Stepper component supports comprehensive keyboard navigation out of the box:
Key Function ArrowLeft / ArrowUp Moves focus to previous step. ArrowRight / ArrowDown Moves focus to next step. Home / End Jumps focus to first or last step UsageHeads up! In our documentation, all examples show standard CoreUI implementation. If you are using a Bootstrap-compatible version of CoreUI, remember to use the following changes:
new bootstrap.Alert(...) instead of new coreui.Alert(...)close.bs.alert instead of close.coreui.alertdata-bs-toggle="..." instead of data-coreui-toggle="..."Add data-coreui-toggle="stepper" to a
element to initialize a Stepper Component automatically via JavaScript:
<div class="stepper" data-coreui-toggle="stepper"></div>
Important: Every Bootstrap Stepper requires data-coreui-toggle=“stepper” to properly initialize and handle steps, navigation, and events.
Via JavaScriptInitialize the Stepper manually via JavaScript:
<div class="stepper"></div>
const stepperElementList = Array.prototype.slice.call(document.querySelectorAll('.stepper'))
const stepperList = stepperElementList.map(stepperEl => {
return new coreui.Stepper(stepperEl)
})
linear boolean true Forces steps to be completed in order (sequential navigation). Set false for free navigation. skipValidation boolean false When set to true, disables form validation completely, allowing users to navigate between steps regardless of form state. Methods Method Description next() Go to the next step. prev() Go to the previous step. reset() Reset the stepper to its initial state. finish() Complete the form wizard and mark all steps as finished. showStep(buttonOrStepNumber) Programmatically jump to a specific step button or step number. getInstance(element) Retrieve the Stepper instance from a DOM element. getOrCreateInstance(element) Get or create the Stepper instance associated with a DOM element. Events Event Description finish.coreui.stepper Triggered when the last step is completed. reset.coreui.stepper Triggered when the stepper is reset. stepChange.coreui.stepper Fired when the active step changes. stepValidationComplete.coreui.stepper Fired after validating the current step’s form.
Example:
const myStepper = document.getElementById('myStepper')
myStepper.addEventListener('stepChange.coreui.stepper', event => {
// console.log('Step changed to:', event.detail.index)
})
The Stepper component uses CSS variables to allow easy customization of colors, borders, spacing, and indicators.
--cui-stepper-steps-gap: #{$stepper-steps-gap};
--cui-stepper-step-gap: #{$stepper-step-gap};
--cui-stepper-step-button-width: #{$stepper-step-button-width};
--cui-stepper-step-button-color: #{$stepper-step-button-color};
--cui-stepper-step-button-active-color: #{$stepper-step-button-active-color};
--cui-stepper-step-button-complete-color: #{$stepper-step-button-complete-color};
--cui-stepper-step-button-disabled-color: #{$stepper-step-button-disabled-color};
--cui-stepper-step-indicator-width: #{$stepper-step-indicator-width};
--cui-stepper-step-indicator-height: #{$stepper-step-indicator-height};
--cui-stepper-step-indicator-bg: #{$stepper-step-indicator-bg};
--cui-stepper-step-indicator-color: #{$stepper-step-indicator-color};
--cui-stepper-step-indicator-border-width: #{$stepper-step-indicator-border-width};
--cui-stepper-step-indicator-border-color: #{$stepper-step-indicator-border-color};
--cui-stepper-step-indicator-transition: #{$stepper-step-indicator-transition};
--cui-stepper-step-indicator-active-color: #{$stepper-step-indicator-active-color};
--cui-stepper-step-indicator-active-bg: #{$stepper-step-indicator-active-bg};
--cui-stepper-step-indicator-active-border-color: #{$stepper-step-indicator-active-border-color};
--cui-stepper-step-indicator-complete-color: #{$stepper-step-indicator-complete-color};
--cui-stepper-step-indicator-complete-bg: #{$stepper-step-indicator-complete-bg};
--cui-stepper-step-indicator-complete-border-color: #{$stepper-step-indicator-complete-border-color};
--cui-stepper-step-indicator-disabled-color: #{$stepper-step-indicator-disabled-color};
--cui-stepper-step-indicator-disabled-bg: #{$stepper-step-indicator-disabled-bg};
--cui-stepper-step-indicator-disabled-border-color: #{$stepper-step-indicator-disabled-border-color};
--cui-stepper-step-indicator-focus-box-shadow: #{$stepper-step-indicator-focus-box-shadow};
--cui-stepper-step-indicator-icon: #{$stepper-step-indicator-icon};
--cui-stepper-step-indicator-icon-color: #{$stepper-step-indicator-icon-color};
--cui-stepper-step-indicator-icon-size: #{$stepper-step-indicator-icon-size};
--cui-stepper-step-connector-height: #{$stepper-step-connector-height};
--cui-stepper-step-connector-gap: #{$stepper-step-connector-gap};
--cui-stepper-step-connector-bg: #{$stepper-step-connector-bg};
--cui-stepper-step-connector-complete-bg: #{$stepper-step-connector-complete-bg};
--cui-stepper-step-connector-transition: #{$stepper-step-connector-transition};
--cui-stepper-step-content-transition: #{$stepper-step-content-transition};Advanced theming is possible via Sass variables.
$stepper-steps-gap: .5rem;
$stepper-step-gap: .5rem;
$stepper-step-button-width: 8rem;
$stepper-step-button-color: var(--#{$prefix}secondary-color);
$stepper-step-button-active-color: var(--#{$prefix}secondary-color);
$stepper-step-button-complete-color: var(--#{$prefix}secondary-color);
$stepper-step-button-disabled-color: var(--#{$prefix}secondary-color);
$stepper-step-indicator-width: 2rem;
$stepper-step-indicator-height: 2rem;
$stepper-step-indicator-color: var(--#{$prefix}secondary);
$stepper-step-indicator-bg: transparent;
$stepper-step-indicator-border-width: var(--#{$prefix}border-width);
$stepper-step-indicator-border-color: var(--#{$prefix}border-color);
$stepper-step-indicator-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
$stepper-step-indicator-active-color: var(--#{$prefix}primary);
$stepper-step-indicator-active-bg: rgba(var(--#{$prefix}primary-rgb), .05);
$stepper-step-indicator-active-border-color: var(--#{$prefix}primary);
$stepper-step-indicator-complete-color: var(--#{$prefix}white);
$stepper-step-indicator-complete-bg: var(--#{$prefix}primary);
$stepper-step-indicator-complete-border-color: var(--#{$prefix}primary);
$stepper-step-indicator-disabled-color: var(--#{$prefix}secondary);
$stepper-step-indicator-disabled-bg: transparent;
$stepper-step-indicator-disabled-border-color: var(--#{$prefix}border-color);
$stepper-step-indicator-focus-box-shadow: $focus-ring-box-shadow;
$stepper-step-indicator-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon fill='var(--ci-primary-color, currentColor)' points='200.359 382.269 61.057 251.673 82.943 228.327 199.641 337.731 428.686 108.687 451.314 131.313 200.359 382.269' class='ci-primary'/%3E%3C/svg%3E");
$stepper-step-indicator-icon-color: var(--#{$prefix}white);
$stepper-step-indicator-icon-size: 1rem;
$stepper-step-connector-height: .125rem;
$stepper-step-connector-gap: 1rem;
$stepper-step-connector-bg: var(--#{$prefix}secondary-bg);
$stepper-step-connector-complete-bg: var(--#{$prefix}primary);
$stepper-step-connector-transition: background-color .15s ease-in-out;
$stepper-step-content-transition: height .3s ease-in-out;
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4