This tool will convert your HTML to Bootstrap Studio File (.bsdesign)

Hey all
I created this tiny tool to convert the HTML files to Bootstrap studio project file.
Try it and let me know of your feedback.
https://html2bedesign.bss.design/

Update 03-31-2022
I moved the website to a new host at https://html2bsdesign.com/
Please update your bookmarks.

19 Likes

This is impressive work! You parse the code and generate a gzip file entirely in the browser. Many people will find this tool helpful :slight_smile:

We’ve done experiments with parsing imported HTML in Bootstrap Studio but decided to drop the idea because it doesn’t work well in many cases. A lot of the HTML that people wish to import is either broken, contains PHP or is not written in Bootstrap, and results in a mix of divs and custom code.

Looking forward to seeing how your tool evolves in the future!

4 Likes

Thank you Martin,
Will try my best to not disappoint anyone.

1 Like

Thought I’d try this on a “non” Bootstrap site, actually a pretty old non Bootstrap site and although it seemed to have worked great and pulled it all in, the app is running extremely slow making any changes. Sometimes 5 to 10 seconds per change I have to wait for everything to catch up.

I am guesing it may be some internal scripts so I’ll be stripping those out and seeing what is causing them and will let you know. Could be you may need to strip js from the html or something and put it in another file or replace the function (that would be my option, just replace it) to make it work right.

Still all in all this is a fantastic little tool indeed!

P.S. It is definitely full of DIVs as well, but it was written that way back then, this would be like almost 10 years ago so … yeah lol.
What’s great is that now i can convert it to BSS by replacing things more easily with drag and drop than I could with having to redo it from scratch. Just a though @Martin.

Also @Martin Stop worrying about what it will do to the code and just add it to the app! :stuck_out_tongue:
Let people learn as they go on some of these things and they can always ask in here if there’s a problem with something. It’s kind of like right now, this slowness makes me think about things and I learn from that, they can too. A lot of it isn’t rocket science and although it may break some things, I’m almost 100% positive they will expect it if the code isn’t Bootstrap, or it’s old like this site I’m experimenting on now is.

Thanks @jo-r
I will look into it.

if at-all possible, can you please send me the file causing issue in my private message? it will help me diagnose the issue.

Sure, give me a little bit to get a few changes in there to finish what I started and I’ll send it to ya. Thanks for checking into it.

Ok I sent you a message with a link to download it.

Just as added info: The slowness seems to be only when moving things (dragging and dropping) in the Overview Panel. If I do the same moves in the visual pane it works right away, no lag at all. Saves are all right away, changes to external css files happen immediately upon saving of file. Everything seems ok except for rearranging items in the Overview Panel … so far …

Also when it brings in text (seriously I couldn’t care less LOL, jsut happy it does it at all), it’s adding a ton of space between paragraphs. Just an observation and an easy fix by the user.

Roger that @jo-r
Will look into it shortly

Hi @R.Omer, i tried the tool and get this error when open the result in BSS

I can send sample of page if needed via private message, anyway this is look promised :")

hi @jo-r
Performance seems to be excellent on my side, one thing I did notice is sometimes you need to close Bootstrap Studio and re-open, just to clear out cache and also keeping only one or two projects opened concurrently helps. since this is on BSS side, I’m not sure, if I can do anything to help…

sorry for delay, I was stuck at new user limit, was supposed to wait 15 hours.

hi @raniaamina
Please send me a file in my private message, this is exactly what I am looking for, error, we can make it better…

1 Like

Done, i’ve sent a message to you :")

I will only say one thing, CONGRATULATIONS it worked perfectly for me, it is true it creates a lot of Div but it works wonderfully. thanks I hope you don’t leave this project.

1 Like

hi @raniaamina
I looked at your file, your html code is incompatible to how BSS handles it, footer tags cannot contain text directly in it, change your footer tag to <footer class="footer"><p>© 2019 vCard</p></footer>, then try again.
but this is a good test, I will change the code to analyze these issues, as this maybe the case in lot of the html documents.

I also spotted another issue, that is with SVG code, it’s not going in custom code entirely, I will also look into it.

glad to be off help @migoel585

Great! It works!
Thanks @R.Omer, btw is this tool will always available?

yes, I set the expiration parameter to never expire, however, if new BSS releases some changes that are not compatible, then we have to make changes accordingly, but I am thinking to keep it going as long as humanly possible. :smile:

1 Like

Great, just my opinion, it will better to serve it in specific place instead of using bss.design, as we know about the limit of link for bss design per account, just worry it will replace incidentally or other reason. Put the code in github/gitlab is other better option if possible.

Anyway, this is great tool. Thanks for make it happen @R.Omer :")
Idk, will Bootstrap Studio adopt this tool as plugin or extension, it think it can help most of bss user :")

hi @raniaamina
Please try your old code, it should work now.