Hello,
i just installed Boostrap Studio. I already have a website which i built with bootstrap (a folder with HTML-, CSS- and JS-files). How can I import that website into Bootstrap Studio to keep working with the website in the programm?
Ok before I explain , you need to know that your existing bootstrap site won't be editable as drag and drop if you import all of it in. But if you are happy to manually edit your code that's fine.
But if you want to enhance using drag and drop then I'm afraid you will need to rebuild your site using the tool with drag and drop from scratch.
To import your current site you just have to drag in your HTML, css and js manually.
1) open a browser window for you files 2) select all your html files for pages and drag into bootstrap studio and they will sit in the pages folder 3) select all your css file and drag them in and the same will happen, you will then need to reorder the css if needs be 4) select all your js files and then drag in all all with sit in the js folder
From there as I said you would need to manually edit your code as a custom code component.
I would advise that you rebuild using this tool as it will be slow to start with but will make it easier going forward.
2 Likes
Do you have any idea if Bootstrap Studio changes any div classes, or adds any extra files in the imported HTML? (as in creates new files or changes classes names in the html etc)
Thank you!
Hey @vforvenclimb,
Welcome to the forums! Hope you have been enjoying Bootstrap Studio.
To answer your question, yes. Bootstrap Studio does modify divs and classes, BUT this is only when using the Custom Code element which lets you insert your own code. Custom Code is cleaned up to be shown in the editor if it is not valid, and converting Custom Code into elements will also sanitise the HTML. however, Bootstrap Studio does not create new files if you are importing HTML or using Custom Code.
For more information, you can check the documentation
thanks a lot for the reply @catkin
So if I already have an HTML template with an /assets folder and /css and /js folder with their own files, do I still need to tick these 2 options? Or would you suggest to manually drag and drop the css and js files?
PS: I’ll look closer into the documentation you’ve sent as well
Okay, I’ve done a test @catkin .
Would you mind confirming if this is the right process to import an existent HTML?
- drag and drop the .HTML file into Bootstrap Studio
- at the window popup above, click OK, this will allow it to import already existent css/js files from your pre-existent HTML project (not Bootstrap)
- Bootstrap Studio will organise the files accordingly in the BS panel right side
- click Export > Export to export the project
— > here I noticed that the final exported folder will keep some original folders, but also creates a new folder “bootstrap” that has 2 new sub-folders js and css which have 1 file each inside them, as per screenshot:
Do you have any advice on this:
1. Is this the correct way to do it?
2. Would there be a setting to add those JS (bootstrap.min.js) and CSS (bootstrap.min.css) files in already existent /assets/js and /assets/css folders instead of a separate /bootstrap/js and /bootstrap/css folder?
Thank you!
PS: yes loving Bootstrap Studio, the tool is amazing!
1 Like
Heya @vforvenclimb!
Glad I was able to help, you seem to have worked it all out yourself, congratulations on that! Bootstrap Studio is an amazing tool, I love working with it and basically do every day.
The Bootstrap folder is created on export as this is where all the Bootstrap files are saved, such as the JS and CSS for your project.
Be careful if you already have the Bootstrap CSS and JS files from your imported project, that could cause issues. I haven’t tested if the program is smart enough to remove any existing Bootstrap related JS and CSS files from an existing, imported project.
If you have more questions, or if I could clarify anything better let me know! I have, admittedly not used the import feature much myself.
from my understanding at the end of this summer there is a new Bootstrap Studio version to be launched and a new feature for importing existent HTML projects.
You are right, it’d be great if either 1) it removes existent Bootstrap related JS and CSS files AND updates the HTML code , OR 2) it scans the HTML code, recognizes that it has Bootstrap JS and CSS files AND it keeps these existent JS/CSS files.
Whichever way it goes, the idea is not to double up and have extra files that you need to cross-check if you already have others in your HTML and in your folders – it just seems double handling for same thing, and more work than less : }
I believe there’s heaps of people that want to use it and not mess around or run around the bush when editing the HTML : D
2 Likes
Just to be sure you are aware, you are posting in a 6 year old post in which none of the importing was available yet, except for as a complete Custom Code setup. This is not the case anymore and importing HTML and CSS has been added to the most recent version.
If you set your project’s settings to use CDN’s for your JS and CSS you shouldn’t have any issues other than a handful of cleanup due to custom css codes and a handful of custom html codes.
Custom CSS is usually where the issues lie at this point though.
2 Likes
yep, saw it in the new update, will check it out, thanks for the tips buddy!