Form.io HTML + Bootstrap Workspace

Edit HTML content on the left and manage Bootstrap classes on the right.

Display > Content Display > Custom CSS Class IndexedDB Local Only
Applied Bootstrap No classes selected.
Applied Count 0 classes

HTML Workspace

Edit content and copy the wrapped output for Form.io HTML Element > Content.

HTML Element Content

Wrapped HTML for the Form.io HTML Element component.


                                

                                    No editor content yet.
                                    HTML Element > Content
                                

                            

                        

                    

                


                

                    

                        

                            

                                
Bootstrap Workspace

                                

                                    Select utilities, preview live, and save styles for Favorites/Export.
                                

                                
Preview updates as you edit. Save styles to include them in Favorites/Export.

                            

                            Styles are saved
                        

                        

                            

                                
                                
                            

                        

                    

                    

                        

                            

                                

                                    
                                

                                

                                    

                                        
Combo Cards

                                        
                                    

                                    

                                

                                

                            

                            

                                

                                    
Live Preview

                                    

                                        

                                    

                                    
The preview shell uses your current style selections. The HTML inside it is not rewritten.

                                    
                                    
                                    
Manual edits update preview and copy output immediately.

                                

                                

                                    

                                        

                                            
Bootstrap Classes

                                            
Paste this into Form.io Display > Custom CSS Class.

                                        

                                        
                                    

                                    
                                    

                                        No Bootstrap classes selected.
                                        Display > Custom CSS Class
                                    

                                    

                                        
                                        
                                    

                                

                            

                        

                    

                

            


            

            

                

                    

                        
Favorites

                        

                            Favorites save the editor HTML and committed Bootstrap selections together.
                        

                    

                    

                        
                        
                        
                    

                

                

                    

                        
Favorites

                        0 saved