# Importing Assets

# Importing Images

Bootstrap Studio supports multiple image formats - JPG, GIF, PNG, SVG, Webm and AVIF. To import, drag the image files from your file manager and drop them ontop the application window, or use File > Import.

Images Group

If the app detects that the image you are importing can be compressed further, you will see this dialog:

Image Optimization

Switching the Remember checkbox will apply your preference for all subsequent images without showing you the dialog. The setting is reset when you restart the application.

# Importing CSS

Importing CSS is equally easy. Just drag and drop one or more CSS files. Bootstrap Studio will parse the stylesheet, import it and make it ready for editing.

In order to successfully import CSS files, make sure they can pass this CSS validator (opens new window). Errors in the CSS code may prevent the file from being parsed properly and need to be fixed before importing.

# Importing JavaScript

If you wish to add any JavaScript file to your design, whether it be a library or your own code, you can import it by dropping it into the app. The file can then be opened in the built-in JS editor and modified as needed.

# Importing Pages

You can import externally created pages by dropping them onto the application window. One limitation to this is that externally created designs are imported as Custom Code and are only editable as HTML. Bootstrap Studio treats them as a black box and doesn't attempt to parse them.

This method of importing is a way to get externally created pages in the app quickly, but it misses most of the benefits that Bootstrap Studio brings in terms of visual editing. For those, you will need to recreate your design inside the application.