Bootstrap 5 Open Source

Dynamic Themes

The world's most popular CSS framework, now with real-time theme customization. Change colors, fonts, borders and more instantly.

Get Started Documentation

Need a completely custom build? Use the Customizer.

🎨
Theme Customizer

Click the ⚙️ button to start customizing

Primary Success Danger Warning

Explore Components

Every Bootstrap component, fully themed and customizable

🎨
Colors

Multiple color palettes to choose from

🔤
Typography

Custom font pairings for every style

🌗
Dark Mode

Seamless light and dark themes

⚡
Presets

One-click theme presets ready to use

🎨 Themes
🌙 Mode
☀️ Light mode
⚡ Presets
Select a theme...
🎨 Color Palette
Select colors...
🔤 Typography
Select fonts...
📐 Borders
Select border...
⭕ Corners
Select rounding...
💫 Shadows
Select shadows...
↔️ Spacing
Select spacing...
🌈 Gradients
Gradients?
✨ Accent Line
Select accent...
📋 Current Configuration

      
    

  


  
  


    
    

      
Navbar

      
    


    
    

      
Buttons

      

        

          
Solid Buttons

          

            
            
            
            
            
            
            
            
          

        

        

          
Outline Buttons

          

            
            
            
            
            
            
            
          

        

        

          
Button Sizes

          

            
            
            
            
            Link Button
          

        

      

    


    
    

      
Cards

      

        

          

            

              Primary Card
            

            

              
Card Title

              
Sample content to see how the theme applies to the cards in the system.

              Action
            

          

        

        

          

            

              Secondary Card
            

            

              
Card Title

              
Sample content to see how the theme applies to the cards in the system.

              Action
            

          

        

        

          

            

              Light Card
            

            

              
Card Title

              
Sample content to see how the theme applies to the cards in the system.

              Action
            

          

        

      

    


    
    

      
Alerts

      

        

          

            Primary! This is a primary alert.
            
          

          
Secondary Alert

          

            Info! Something you should know about.
            
          

          

            Success! Operation completed successfully.
          

        

        

          

            Danger! Something went wrong.
            
          

          

            Warning! Please check your input.
          

          
Light Alert

          
Dark Alert

        

      

    


    
    

      
List, Badges & Progress

      

        

          
List Group

          
    
            
  • Active Item
    • 
            
  • 
              Messages
              14
            
    • 
            
  • 
              Alerts
              3
            
    • 
            
  • 
              Updates
              7
            
    • 
            
  • Settings
    • 
          

        

        

          
Badges

          

            Primary
            Secondary
            Success
            Danger
            Warning
            Info
          

          

            Pill Primary
            Pill Secondary
            Pill Success
            Pill Danger
          


          
Progress Bars

          

            

          

          

            

          

          

            

            

          

        

      

    


    
    

      
Forms


      
      

        

          
Basic Form

          

            

              
              
            

            

              
              
            

            

              
              
            

            

              

                
                
              

            

            

              
            

          

        

      


      
      

        

          
Floating Labels

          

            

              

                
                
              

            

            

              

                
                
              

            

            

              

                
                
              

            

          

        

      


      
      

        

          
Input Groups

          

            

              
              

                @
                
              

            

            

              
              

                
                @example.com
              

            

            

              
              

                $
                
                .00
              

            

            

              
              

                

                  
                

                
              

            

            

              
              

                
                
              

            

            

              
              

                
                
              

            

          

        

      


      
      

        

          
Range & Switches

          

            

              
              
            

            

              
              

                

                  
                  
                

                

                  
                  
                

                

                  
                  
                

              

            

          

        

      


      
      

        

          
Form Validation

          

            

              
              
              
Looks good!

            

            

              
              
              
Looks good!

            

            

              
              

                @
                
                
Please choose a username.

              

            

            

              
              
              
Please provide a valid city.

            

            

              
              
              
Please select a state.

            

            

              
              
              
Please provide a zip.

            

            

              

                
                
                
You must agree before submitting.

              

            

            

              
            

          

        

      

      
    


    
    

    
    

      
Typography

      

        

          
Heading 1

          
Heading 2

          
Heading 3

          
Heading 4

          
Heading 5

          
Heading 6

        

        

          
Normal paragraph with a link,
            bold text
            and italic text.
          

          
Primary Text

          
Secondary Text

          
Success Text

          
Danger Text

          

            
This is a blockquote element to demonstrate themed typography styles.

            
Someone famous in Source Title

          

        

      

    


    
    

      
Table

      

        

          
Users

          3 records
        

        

          

            
              

                #
                Name
                Email
                Role
                Status
              

            
            
              

                1
                Anna Smith
                anna@example.com
                Admin
                Active
              

              

                2
                John Doe
                john@example.com
                Editor
                Active
              

              

                3
                Mary Rose
                mary@example.com
                User
                Pending
              

            
          

        

      

    


    
    

      
Accordion

      

        

          

            
          

          

            

              Bootstrap 5 is the most popular CSS framework in the world for building responsive, mobile-first websites.
              It provides a comprehensive set of pre-built components and utilities.
            

          

        

        

          

            
          

          

            

              No, Bootstrap 5 removed jQuery dependency. Now it uses pure JavaScript (Vanilla JS) for all interactive
              components.
            

          

        

        

          

            
          

          

            

              Yes, it is compatible with all modern browsers: Chrome, Firefox, Edge, Safari and Opera.
            

          

        

      

    


    
    

    
    

      
Breadcrumb & Spinners

      

        

          
Breadcrumb

          

          
Spinners

          

            
            
            
            
            
            
          

        


        

          
Placeholders Skeleton

          

            

              

                
              

              

                
                
                
                
                
              

              
            

          

        

      

    


    
    

      
Interactive Components

      

        

          
Offcanvas & Toasts

          

            
            
            
            
          

        

        

          
Modals

          

            
            
            
          

        

      

    


    
    

    
    

      
Collapse

      

        
        
        
      

      

        

          Some placeholder content for the collapse component. This panel is hidden by default but revealed when the
          user activates the relevant trigger.
        

      

      

        

          

            

              First collapse panel — toggle with the button above to show both at once.
            

          

        

        

          

            

              Second collapse panel — toggle with the button above to show both at once.
            

          

        

      

    


    
    

      
Button Groups & Toolbar

      

      
Popover & Tooltip

      

        
        
        
      

    


    
    

      
Card Variations

      

        

          

            

              

                16:9 Ratio
              

            

            

              
Responsive Design

              
Use ratio classes to maintain fixed aspect ratios across all screen
                sizes.

            

            
Updated 3 days ago

          

        

        

          

            

              
🚀

              
Centered Card

              
Perfectly aligned content with flexbox utilities.

              Explore
            

          

        

        

          

            

              

                New
                
Featured Card

              

              
A card with a primary border accent and badge.

              
    
                
  • ✅ Feature one
    • 
                
  • ✅ Feature two
    • 
                
  • ✅ Feature three
    • 
              

              Get Started
            

          

        

      

    


  


  
  

    

      
🗂️ Side Panel

      
    

    

      
The Offcanvas is a sliding component that can appear from any side of the screen.

      
      

        

          Tip: It can also be opened from the right, top or bottom.