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

Yes, it works!
Just need small polish in css and related assets

Hi @R.Omer

I’m new on this board and to BSS, so hi everybody!

I tried the converter yesterday on an old html file (bootstrap 3.xx) manually coded and it worked pretty well.

After your update, the result is now gibberish on it as well as simple bootstrap 5 html files generated by BSS.

Among other things it does not cope well with navbar as the converter tends to append lots of text (coming from list, headings, paragraphs) etc multiple times.

I think to reproduce the error, you simply need to create a new project with the single page design Agency, export the html and have it go through the converter.

PS: Possibly this post will be post with some delay as I’m new to this board.

hi @cimperia
Will try it, just a simple request, when reporting an issue, please take your time and add screenshots, as well as send me the file that caused the issue. This helps a lot to pinpoint the problem.

hi @cimperia
There is no Agency template for bootstrap3, please send me you file in a private message

I sent you a PM.

hi @cimperia
You are right, I had one of the Boolean reversed. should be alright now.

Thanks @R.Omer. It works well now.

Using BSS’s Agency theme, I did a quick diff (using winmerge) between the original html and the converted html, and it looks very good. However there are a couple of things which are not right.

  1. the converter tends to double up the class names on div through out the html file.
<div class="container">

shows up as:

<div class="container container">
  1. It misses out the class names on the body element.
<body id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="54">

shows up as:


Besides that, it was perfect.

In trying to understand the redundant class names, I diffed the json files and there were some differences (Ignoring the missing images etc.) that might give a clue to this, but you’ll be able to assert that.

hello @cimperia
I noticed the doubling of classes, that’s on my to do list, however, it’s wasn’t a big issue so I pushed it to the back, as for the body class names, I am not converting body at-all, I’m simply working with what’s inside the body, so maybe in future releases I will look into adjusting body tag.

The missing images are an issue of BSS. Just throwing that in here in case you weren’t aware of that. I’m hoping that they remedy that soon.

hi @jo-r
I know of this, thinking to replace the images with a placeholder image before process begins, what do you think?

I’m not sure how that all works. Just wanted to be sure you guys didn’t put hours of time in trying to fix something with the converter that wasn’t broken in it. :stuck_out_tongue_winking_eye:

1 Like

I don’t think it’s a good idea, or maybe as an option for the conversion.

If the export is made without hard coded paths (the default option in export) and the converter does not prepend paths to css, js & images then importing back will be perfect - as long as one sticks to BSS’ standards: assets/css assets/img etc.

Therefore, I believe the fix is to make sure that the converter removes the paths in front of those files.

EDIT: I forgot to mention that the converter does not play nice with navbars, i.e. the navbar object doesn’t appear in the imported project. The functionality is still there when running the page, but it’s not possible to manipulate the navbar within BSS. Instead you get a nav, a UL and LI items.

1 Like

sorry, but wouldn’t it be convert (Missed the N)?

1 Like

lol @carliedu , you’re right, typo, I fixed it. thanks

Wow! Worked perfectly.

1 Like

Very nice, it would be great if you could add more pages to export all together for the project.
I started to see now, if you already have this functionality could you show me?

1 Like

hi @gilmar,
yes absolutely, in the near future inshaAllah

1 Like

Impressive work. There’s a bug with Table Headers. They are imported as tr instead of th. Also the content of each cell is repeated.
Original source:

      <div class="table-responsive">
        <table class="table table-striped table-sm">
              <th scope="col">#</th>
              <th scope="col">Header</th>
              <th scope="col">Header</th>
              <th scope="col">Header</th>
              <th scope="col">Header</th>

After import:

1 Like

hi @thedani
Please send me your file in my private message, I will look into it. and thanks for the compliment.

Great Tool! Is there gonna be a way to convert a whole project of Html files in the future?

1 Like