Sections
Profile Picture of the author

Upload Bootstrap Theme

on 02-19-2024 11:27 PM by Eliza To

380

Tips and Tricks: Upload Bootstrap Theme

Bootstrap Builder

SnapApp easily incorporates themes that reflects across the entire application.
A custom theme can be created to match your brand’s exact color palette and font typeface. Themes can be created/edited using any number of online theme customizers, but here is a website that is very simple and easy to use:  https://bootstrap.build/app

Screenshot 2024-02-17 at 6.37.53 AM.png


The Solution 

1) In the Color system section on the right panel, scroll down to: $primary, $secondary, $success, $info, $warning, and $danger 

This is going to be the major drive to your Application's color scheme. Type in the hex color (ex: #212529) to match your exact color pallet. (ex: #fffff).

Screenshot 2024-02-19 at 4.36.35 PM.png
$primary: This usually denotes the primary color of a design system or user interface. It's the dominant color that sets the overall tone.
$secondary: The secondary color is complementary to the primary color. It's used to provide visual contrast and variety while maintaining harmony within the design. 
$success: This color typically indicates success or positive outcomes. It's commonly used to highlight successful actions or confirmations in user interfaces, such as successfully submitted forms or completed tasks.
$warning: This color is associated with warnings or alerts. It's used to draw attention to potentially risky actions, errors, or situations that require user attention or intervention.
$danger: The danger color signifies critical errors, warnings, or actions that may have severe consequences. It's typically used for indicating errors, failed operations, or actions that could lead to data loss or other negative outcomes.
$info: The info color often represents neutral or informative elements. It might be used for displaying informational messages, alerts, or providing additional context to users without necessarily indicating success or failure. 


      
2) Download bootstrap.min.css
      
These color's will be the main thing you need to customize on this website. When you are done, you need to download the bootstrap.min.css under "Export theme".
        
Screenshot 2024-02-17 at 6.39.05 AM.png
3) Upload bootstrap.min.css
      
1. Upload the file in "Choose CSS/Theme" and click the Upload button. 
        
2. In the top section, select "Custom Theme" in the Theme drop down and click "Save".
      
Screenshot 2024-02-17 at 6.39.05 AM.pngScreenshot 2024-02-17 at 6.39.05 AM.png
3) Typography
      
You can now go into the Application Settings and locate the last box labeled "Font".
        
Simply, type the font you want to reflect across the entire application. (Ex: Roboto) (Ex: Oswald). Click on the Google Font's link for the list of google fonts that can be leveraged. You just need to type the font in the box once you find one (no need for quotation).
      
    
      
Screenshot 2024-02-17 at 6.39.05 AM.png
The Result - Font: Raleway
      
Screenshot 2024-02-17 at 6.35.52 AM.png

                

            

        

        

            

            

            

        

            

  




    

        

            

        

        

            
                
                    Generate Text
                    
                
            
        

        

            

            

                
                
                

                    
                    
                    

                        
                    

                

            

        

    










        

        

    


    
    

    
                

                
                



    
    

        

            

                Profile image
            


            
Snapapp website agent