Export HTML is unviewable and missing styles

Bug Reports
1

I am new to Bootstrap Studio and I bought the Lifetime version. I was hoping this is an easy tool to use. When i exported the index.html page look aweful.

1 Like
2

When you export you should export the whole site in order to make sure everything works. Once you do that then you can just export only the pages or resources you have changed.

1 Like
3

“Easy” is a relative term. Bootstrap Studio has a learning curve, but it’s not especially difficult. If you read the documentation, watch the videos, and take your time, it’s not hard to build very nice websites.

If you export an HTML file and upload it to a server, you have to make sure to upload the asset folder as well, or all you will see is unstyled HTML, which will certainly look awful. How does your website look when you preview it in a browser using BSS preview function compared to your exported HTML? If they don’t look the same, you did something wrong.

4

This happened to me as well.
Adding to this old thread in case anyone else comes across this situation.

If you were to look at the exported source code for your webpage (in your local work environment, using whatever text editor you use), you will notice links within the section that look something like this:

<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/css/styles.css">

That very first forward slash / before the assets folder, indicates an absolute path. And, even though all the relevant assets folders and subfolders were exported, the styles still weren’t showing up. That preceding forward slash is most likely the issue if your “look and feel” or style isn’t being displayed. The browser can’t find, and therefore load, those style sheets.

What worked for me, on my local windows machine, is to make sure in the “Use Absolute Paths” is not checked, or active, in “Export Settings.”

Those preceding directory slashes will be removed, yielding this:

<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/styles.css">

Then run another Export and the page(s) should look like what you “Preview” from within Bootstrap Studio.

Hope that helps!