Stepper

Bootstrap 4 Stepper with Material Design UI

Stepper is an element that displays progress by breaking an entire process into a sequence of logical and numbered steps. It is used for registration and feedback form, shopping cart experience, questionnaire etc.

Horizontal Stepper Hoverable Horizontal Stepper Horizontal Stepper with Links Horizontal Stepper with Active State Horizontal Stepper with Completed State Horizontal Stepper with Disabled State Horizontal Stepper with Secondary Text Horizontal Stepper with Bottom Labels Responsive Horizontal Stepper Horizontal Stepper Without Divider Vertical Stepper Vertical Stepper with Links Vertical Stepper with Active State Vertical Stepper with Completed State Vertical Stepper with Disabled State Vertical Stepper with Accordion Configuration Options

Horizontal Stepper

  • 1 done

    Select campaign settings

  • 2 done

    Create ad group

  • 3 done

    Create an ad


	                        
 
	                    


	                
 
	                
	                
	                


	                    
	                    
Horizontal Hoverable Stepper

	                    
To create a horizontal stepper with hover effect, add .pmd-stepper-hover followed by .pmd-stepper.

	                    
	                    
	                    
	                    

	                         
	                        

	                            
	                            
    
	                                
  • 
	                                    
    
	                                        
     
	                                            1
	                                            done
	                                        
    
	                                        
    
	                                            
    Select campaign settings
    
	                                        
    
	                                
    • 
	                                
  • 
	                                    
    
	                                        
    
	                                            2
	                                            done
	                                        
    
	                                        
    
	                                            
    Create ad group
    
	                                        
    
	                                
    • 
	                                
  • 
	                                    
    
	                                        
    
	                                            3
	                                            done
	                                        
    
	                                        
    
	                                            
    Create an ad
    
	                                        
    
	                                
    • 
	                            

	                        

	                        
	                        
	                        
	                        

	                            

	                        
 
	                    


	                
 

	                
	                


	                    
	                    
	                    
Use <a> tags to create actionable stepper items.

	                    
	                    
	                    
	                    

	                         
	                        

	                            
	                            
	                        

	                        
	                        
	                        
	                        

	                            

	                        
 
	                    

	                    
	                
 

	                
	                


	                    
	                    
Horizontal Stepper with Active State

	                    
Add .active class along with .nav-item to showcase the active state of a stepper item.

	                    
	                    
	                    
	                    

	                         
	                        

	                            
	                            
	                        

	                        
	                        
	                        
	                        

	                            

	                        
 
	                    

	                    
	                
 

	                
	                


	                    
	                    
Horizontal Stepper with Completed State

	                    
Add .completed class along with .nav-item to showcase the completed state of a stepper item. Also if you want to use an icon in the completed state, add an <i> tag with class .completed-media inside the <div> having class .pmd-stepper-media.

	                    
	                    
	                    
	                    

	                         
	                        

	                            
	                        

	                        
	                        
	                        
	                        

	                            

	                        
 
	                    

	                    
	                
 

	                
	                


	                    
	                    
Horizontal Stepper with Disabled State

	                    
Add .disabled class along with .nav-item to showcase the disabled state of a stepper item.

	                    
	                    
	                    
	                    

	                         
	                        

	                            
	                        

	                        
	                        
	                        
	                        

	                            

	                        
 
	                    

	                    
	                
 

	                
	                


	                    
	                    
Horizontal Stepper with Secondary Text

	                    
You can also add a secondary text in the label of the stepper item.

	                    
	                    
	                    
	                    

	                         
	                        

	                            
	                        

	                        
	                        
	                        
	                        

	                            

	                        
 
	                    

	                    
	                
 

	                
	                


	                    
	                    
Horizontal Stepper with bottom Label

	                    
Add class .pmd-stepper-bottom-label after .pmd-stepper to move the label below the stepper media.

	                    
	                    
	                    
	                    

	                         
	                        

	                            
	                        

	                        
	                        
	                        
	                        

	                            

	                        
 
	                    

	                    
	                
 

	                
	                


	                    
	                    
Responsive Horizontal Stepper

	                    
To make a stepper responsive, use .pmd-stepper-vertical-{sm,md,lg} class along with .pmd-stepper.

	                    
	                    
	                    
	                    

	                         
	                        

	                            
	                        

	                        
	                        
	                        
	                        

	                            

	                        
 
	                    

	                    
	                
 

	                

	                    
	                    
	                    

	                         
	                        

	                            
	                        

	                        
	                        
	                        
	                        

	                            

	                        
 
	                    

	                    
	                


	                

	                    
	                    
	                    

	                         
	                        

	                            
	                        

	                        
	                        
	                        
	                        

	                            

	                        
 
	                    

	                    
	                
 

	                
	                


	                    
	                    
Horizontal Stepper Without Divider

	                    
Add class .pmd-stepper-no-divider alond with .pmd-stepper to remove the dividers between the steps in a stepper.

	                    
	                    
	                    
	                    

	                         
	                        

	                            
	                        

	                        
	                        
	                        
	                        

	                            

	                        
 
	                    

	                    
	                
 

	                
	                


	                    
	                    
Vertical Stepper

	                    
Add class .pmd-stepper-vertical to create a vertical stepper.

	                    
	                    
	                    
	                    

	                         
	                        

	                            
    
	                                
  • 
	                                    
    
	                                        
    
	                                            1
	                                            done
	                                        
    
	                                        
    
	                                            
    Step 1
     
	                                        
    
	                                    
    
	                                    
	                                    
    
	                                        
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate voluptate facere iusto quaerat vitae excepturi, accusantium ut aliquam repellat atque nesciunt nostrum similique. Inventore nostrum ut, nobis porro sapiente.
    
	                                        
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore error excepturi veniam nemo repellendus, distinctio soluta vitae at sit saepe. Optio eaque quia excepturi adipisci pariatur totam, atque odit fugiat.
    
	                                        
    Deserunt voluptatem illum quae nisi soluta eum perferendis nesciunt asperiores tempore saepe reiciendis, vero quod a dolor corporis natus qui magni quas fuga rem excepturi laboriosam. Quisquam expedita ab fugiat.
    
	                                    
    
	                                
    • 
	                                
  • 
	                                    
    
	                                        
    
	                                            2
	                                            done
	                                        
    
	                                        
    
	                                            
    Step 2
    
	                                        
    
	                                    
    
	                                
    • 
	                                
  • 
	                                    
    
	                                        
    
	                                            3
	                                            done
	                                        
    
	                                        
    
	                                            
    Step 3
    
	                                        
    
	                                    
    
	                                
    • 
	                            

	                        

	                        
	                        
	                        
	                        

	                            

	                        
 
	                    

	                    
	                
 

	                
	                


	                    
	                    
	                    
Use <a> tags to create actionable stepper items.

	                    
	                    
	                    
	                    

	                         
	                        

	                            
    
	                                
  • 
	                                    
	                                        
    
	                                            1
	                                            done
	                                        
    
	                                        
    
	                                            
    Step 1
    
	                                        
    
	                                        
	                                    
	                                    
    
	                                        
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate voluptate facere iusto quaerat vitae excepturi, accusantium ut aliquam repellat atque nesciunt nostrum similique. Inventore nostrum ut, nobis porro sapiente.
    
	                                        
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore error excepturi veniam nemo repellendus, distinctio soluta vitae at sit saepe. Optio eaque quia excepturi adipisci pariatur totam, atque odit fugiat.
    
	                                        
    Deserunt voluptatem illum quae nisi soluta eum perferendis nesciunt asperiores tempore saepe reiciendis, vero quod a dolor corporis natus qui magni quas fuga rem excepturi laboriosam. Quisquam expedita ab fugiat.
    
	                                    
    
	                                
    • 
	                                
  • 
	                                    
	                                        
    
	                                            2
	                                            done
	                                        
    
	                                        
    
	                                            
    Step 2
    
	                                        
    
	                                        
	                                
    • 
	                                
  • 
	                                    
	                                        
    
	                                            3
	                                            done
	                                        
    
	                                        
    
	                                            
    Step 3
    
	                                        
    
	                                        
	                                
    • 
	                            

	                        

	                        
	                        
	                        
	                        

	                            

	                        
 
	                    

	                    
	                
 

	                
	                


	                    
	                    
Vertical Stepper with Active State

	                    
Add .active class along with .nav-item to showcase the active state of a vertical stepper item.

	                    
	                    
	                    
	                    

	                         
	                        

	                            
    
	                                
  • 
	                                    
	                                        
    
	                                            1
	                                            done
	                                        
    
	                                        
    
	                                            
    Step 1
    
	                                        
    
	                                        
	                                    
	                                    
    
	                                        
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate voluptate facere iusto quaerat vitae excepturi, accusantium ut aliquam repellat atque nesciunt nostrum similique. Inventore nostrum ut, nobis porro sapiente.
    
	                                        
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore error excepturi veniam nemo repellendus, distinctio soluta vitae at sit saepe. Optio eaque quia excepturi adipisci pariatur totam, atque odit fugiat.
    
	                                        
    Deserunt voluptatem illum quae nisi soluta eum perferendis nesciunt asperiores tempore saepe reiciendis, vero quod a dolor corporis natus qui magni quas fuga rem excepturi laboriosam. Quisquam expedita ab fugiat.
    
	                                    
    
	                                
    • 
	                                
  • 
	                                    
	                                        
    
	                                            2
	                                            done
	                                        
    
	                                        
    
	                                            
    Step 2
    
	                                        
    
	                                        
	                                
    • 
	                                
  • 
	                                    
	                                        
    
	                                            3
	                                            done
	                                        
    
	                                        
    
	                                            
    Step 3
    
	                                        
    
	                                        
	                                
    • 
	                            

	                        

	                        
	                        
	                        
	                        

	                            

	                        
 
	                    

	                    
	                
 

	                
	                


	                    
	                    
Vertical Stepper with Completed State

	                    
Add .completed class along with .nav-item to showcase the completed state of a vertical stepper item.

	                    
	                    
	                    
	                    

	                         
	                        

	                            
    
	                                
  • 
	                                    
	                                        
    
	                                            1
	                                            done
	                                        
    
	                                        
    
	                                            
    Step 1
                      
	                                        
    
	                                        
	                                
    • 
	                                
  • 
	                                    
	                                        
    
	                                            2
	                                            done
	                                        
    
	                                        
    
	                                            
    Step 2
    
	                                        
    
	                                        
	                                    
	                                    
    
	                                        
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate voluptate facere iusto quaerat vitae excepturi, accusantium ut aliquam repellat atque nesciunt nostrum similique. Inventore nostrum ut, nobis porro sapiente.
    
	                                        
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore error excepturi veniam nemo repellendus, distinctio soluta vitae at sit saepe. Optio eaque quia excepturi adipisci pariatur totam, atque odit fugiat.
    
	                                        
    Deserunt voluptatem illum quae nisi soluta eum perferendis nesciunt asperiores tempore saepe reiciendis, vero quod a dolor corporis natus qui magni quas fuga rem excepturi laboriosam. Quisquam expedita ab fugiat.
    
	                                    
    
	                                
    • 
	                                
  • 
	                                    
	                                        
    
	                                            3
	                                            done
	                                        
    
	                                        
    
	                                            
    Step 3
    
	                                        
    
	                                        
	                                
    • 
	                            

	                        

	                        
	                        
	                        
	                        

	                            

	                        
 
	                    

	                    
	                
 

	                
	                


	                    
	                    
Vertical Stepper with Disabled State

	                    
Add .disabled class along with .nav-item to showcase the disabled state of a vertical stepper item.

	                    
	                    
	                    
	                    

	                         
	                        

	                            
    
	                                
  • 
	                                    
	                                        
    
	                                            1
	                                            done
	                                        
    
	                                            
    
	                                            
    Step 1
                      
	                                        
    
	                                        
	                                
    • 
	                                
  • 
	                                    
	                                        
    
	                                            2
	                                            done
	                                        
    
	                                            
    
	                                            
    Step 2
    
	                                        
    
	                                        
	                                
    • 
	                                
  • 
	                                    
	                                        
    
	                                            3
	                                            done
	                                        
    
	                                            
    
	                                            
    Step 3
    
	                                        
    
	                                        
	                                    
	                                    
    
	                                        
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate voluptate facere iusto quaerat vitae excepturi, accusantium ut aliquam repellat atque nesciunt nostrum similique. Inventore nostrum ut, nobis porro sapiente.
    
	                                        
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore error excepturi veniam nemo repellendus, distinctio soluta vitae at sit saepe. Optio eaque quia excepturi adipisci pariatur totam, atque odit fugiat.
    
	                                        
    Deserunt voluptatem illum quae nisi soluta eum perferendis nesciunt asperiores tempore saepe reiciendis, vero quod a dolor corporis natus qui magni quas fuga rem excepturi laboriosam. Quisquam expedita ab fugiat.
    
	                                    
    
	                                
    • 
	                            

	                        

	                        
	                        
	                        
	                        

	                            

	                        
 
	                    

	                    
	                
 

	                
	                


	                    
	                    
Vertical Stepper with Accordion

	                    
You can also create a vertical stepper with Accordion. Wrap the stepper component with the accordion class and then add the necessary collapse properties and classes in the <a> tag and the <div> tag containing class .pmd-stepper-content.

	                    
	                    
	                    
	                    

	                         
	                        

	                            

	                                
    
	                                    
  • 
	                                        
	                                            
    
	                                                1
	                                                done
	                                            
    
	                                            
    
	                                                
    Step 1
     
	                                            
    
	                                            
	                                        
    
	                                            
    
	                                                
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    
	                                            
    
	                                        
    
	                                    
    • 
	                                    
  • 
	                                        
	                                        
    
	                                            
    
	                                                
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    
	                                            
    
	                                        
    
	                                    
    • 
	                                    
  • 
	                                        
	                                        
    
	                                            
    
	                                                
    Finish!
    
	                                                Submit
	                                            
    
	                                        
    
	                                    
    • 
	                                

	                            

	                        

	                        
	                        
	                        
	                        

	                            

	                        
 
	                    

	                    
	                


	                
                    

                       
                       
Configuration Options

                       
The Propeller CSS classes apply various predefined visual enhancements to the Stepper. The table lists the available classes and their effects.

                        
					   	
					   	

	                        
	                            

	                                Classes
	                                Effect
	                                Remark
	                            

	                        
	                        
	                            

	                                .pmd-stepper
	                                Add this class to create stepper.
	                                Required
	                            

	                            

	                                .pmd-stepper-item
	                                Add this class to the stepper items.
	                                Required
	                            

	                            

	                                .pmd-stepper-media
	                                Add this class to the stepper media.
	                                Required
	                            

	                            

	                                .pmd-stepper-title
	                                Add this class to the step title.
	                                Required
	                            

	                            

	                                .pmd-stepper-subtitle
	                                Add this class to the step subtitle.
	                                Required
	                            

	                            

	                                .pmd-stepper-content
	                                Wrap the content of the stepper with this class.
	                                Required
	                            

	                            

	                                .pmd-stepper-no-divider
	                                Add this class to remove dividers between the steps.
	                                Optional
	                            

	                            

	                                .pmd-stepper-hover
	                                Add this class to create hoverable stepper.
	                                Optional
	                            

	                            

	                                .active
	                                Add class to showcase the active state of the stepper.
	                                Optional
	                            

	                            

	                                .completed
	                                Add class to showcase the completed state of the stepper.
	                                Optional
	                            

	                            

	                                .disabled
	                                Add class to showcase the disabled state of the stepper.
	                                Optional
	                            

	                            

	                                .pmd-stepper-bottom-label
	                                Add class to move the label below the media.
	                                Optional
	                            

	                            

	                                .pmd-stepper-vertical-{sm,md,lg}
	                                Add class to create responsive steppers.
	                                Optional
	                            

	                            

	                                .pmd-stepper-vertical
	                                Add class to create vertical stepper.
	                                Optional
	                            

	                        
	                    

						 
                            
                    
  
                    
				
 
                
                
                

                    
 
                        Horizontal Stepper
                        Hoverable Horizontal Stepper
                        Horizontal Stepper with Links 
                        Horizontal Stepper with Active State 
                        Horizontal Stepper with Completed State
                        Horizontal Stepper with Disabled State
                        Horizontal Stepper with Secondary Text
                        Horizontal Stepper with Bottom Labels
                        Responsive Horizontal Stepper
                        Horizontal Stepper Without Divider
                        Vertical Stepper
                        Vertical Stepper with Links
                        Vertical Stepper with Active State
                        Vertical Stepper with Completed State
                        Vertical Stepper with Disabled State
                        Vertical Stepper with Accordion
                        Configuration Options