https://github.com/manuelernestog/bootstrap-multi-steps-component

Multi Steps Form Component for Bootstrap
https://github.com/manuelernestog/bootstrap-multi-steps-component

bootstrap component form ui-components

Last synced: 12 days ago
JSON representation

Multi Steps Form Component for Bootstrap

• Host: GitHub
• URL: https://github.com/manuelernestog/bootstrap-multi-steps-component
• Owner: manuelernestog
• License: mit
• Created: 2022-09-05T21:23:14.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-09-10T15:33:32.000Z (about 2 years ago)
• Last Synced: 2024-10-10T01:51:25.706Z (30 days ago)
• Topics: bootstrap, component, form, ui-components
• Language: HTML
• Homepage: https://manuelernestog.github.io/bootstrap-multi-steps-component/
• Size: 16.6 KB
• Stars: 7
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• cuban-opensource - Multi Steps Form Component for Bootstrap - step forms for Bootstrap (Web Development / UI Libraries)

README

        
# Multi Steps Form Component for Bootstrap

Easily create a multi-step form for bootstrap.

- Bootstrap like sintaxis component

- No Js configuration required

- Installation with CDN

## Demo

https://manuelernestog.github.io/bootstrap-multi-steps-component/

## Requirements

Before include multi-steps-form you should install [Bootstrap](https://getbootstrap.com/) in your project.

## Installation

Simply include CDN file in your project. Put the CSS file inside `` tag and the Js file in the bottom of your `` tag.

```

...

```

## Usage

``` html



    


        ...

        Next

    

    


        ...

        Back

    



```


Create a main `
` tag with class `multi-steps-form`. The class `faded` is optional, this one enable the fade effect when you move through the steps.


Inside the `multi-steps-form` tag create a `
` tag with class `step` for step, add a ID for each steep. 


For change between steps creat a tag with class `step-link` and add the attribute `data-bs-target="[step_id]"`.

You can also move between steps using Javascript.

``` javascript

const multiStepForm = new MultiStepForm("#form-container");

document.getElementById("buttonId").addEventListener("click", () => {

    ...

    multiStepForm.show("#step3");

});

```

## Contribution

Suggestions and pull requests are welcomed!