Version 4.4.0 is out!

Hey guys! We just released Bootstrap Studio 4.4.0. Here is what's new:

  • You can now define favicons, create sitemaps, Twitter and Facebook cards, Progressive Web App manifests and more, from the new Settings > SEO panel.
  • A new Comment component was added. Drag and drop it into your design, and double click it to edit.
  • Commenting support was added to the CSS editor.
  • The Bootstrap framework was updated to 4.2.1 and 3.4.0 respectively. We don't yet have the toast and spinner components built in, we will add them in our upcoming releases.
  • The Google Fonts integration was updated with the latest font families.

In the upcoming 4.4.* releases we will focus on adding new components and some of the power features which we've discussed in the forum. We will update our roadmap soon.

Be sure to report any bugs that you see. Looking forward to your feedback!

Haven't gone through much yet, just playing with the comments, and one thing I need to bring up is that a comment should not even come close to having to be contained within a column or any other container. When we add a comment, it should be straight up, not needing to be contained in anything. This is a lot of extra code to have to wade through that we normally do not ever add when adding a comment.

I appreciate the addition of them though, but they really need to be able to be added straight to wherever we want them without adding anything else with them.

Of other note: It would totally make sense to have the ability to expand all / collapse all in the Overview and HTML panels to go with this so we can see all the comments added at once.

Comments are greats, and useful as they are for me :-) I love the way you add CSS comments.

But i haven't found new bootstrap components (Spinner, toast) or new style for checkbox (switch)....

Version after version, BSS becomes better and better ;-)

I usually just throw my exported design into sublime text and add all my comments in there.

Mist, your comment was actually not even slightly useful. We've asked for comment capabilities for 2 years, so if you don't use them, that's fine, but we don't really need to know that if it doesn't help anything.

I’m not sure why this was such a requested feature. BS Studio is great for concept work and quick drafting of designs but it’s not a full blown development environment and if you’re using the program for that, then you’re doing it wrong! LOL

Oh, and it’s “MiST” not “Mist”

Cheers ;D

Actually I'm doing it very right and have been every since starting to use this app. I can do most anything any of my clients need all within the app and have not had to branch outside of it as of yet. I'm a Designer mind you, not a Developer, but I've included scripts for pretty much anything most businesses will want and need and so far my clients have not asked for anything I couldn't do within the app. So .....

Having said that, Comments are a very very welcome item for many of us that are using the app itself. Mind you I do code, so it's not about not knowing how, it's about ease of management for me :)

I need to also tack on to my comments (no pun intended haha) about the inclusion of the Column as part of the comments in that it adds it visually to the page as well, like any other Column shows up in the visual window, and it totally skews your design in many places. Tried to add one to the Header area for an item I have in there to remind me why it's there (no comments please! lol) and it totally messed up the Header structure and I had to remove it.. Really a bad way to have this set up, pretty much unusable. I'm not prepared to have to create a set of CSS attributes to style a comment so it's doesn't screw up the pages.

Either way, even if I did style them to not screw up the pages, all the columns would be in the code, and so far that's already messing with the ease of readability of the code. :(

Thanks for all the feedback!

@Jo I think I know what's happening. The Row component mistakenly wraps Comments with Columns (like it does with all other components). This is an oversight on our part. Comments don't come with Columns themselves and it should be possible to place them anywhere with no side effects. We will fix this in the next release.

I've seen it's not even in the roadmap, so I ask here.

When will   (non breaking space) support be available?

(and that's not the only html entity missing)

Thanks Martin! Glad to hear it! Looking forward to that fix for comments as well as the items on your new Roadmap post! Keep em coming!

We just released 4.4.1 with the following fixes:

  • Comments are not being wrapped in Columns any more.
  • Shift + Space inserts a   (thanks for bringing it up, @marrco!)
  • fixes for a few other bugs that were reported.

We also updated our roadmap for the 4.4.X releases. You can find it here.

Thanks for the fixes and the NBSP function!

Thanks a million for the comment component. Not only does it allow us to develop well documented HTML but opens the door to other JS libraries and potentially other HTML postprocessing. "Exciting" possibilities to this developer.

For example, KnockoutJS has a facility called "virtual elements". A virtual element is marked up in HTML as a comment and can be bound to a JS function. See Creating custom bindings that support virtual elements

Referencing the new Road Map -- Thanks for the new components on the way ... spinner, toast, etc.

But while your'e working on those, could you take a look at adding the Bootstrap Form Row component? It's nothing more than: div class="form-row" and behaves just like div class="row" but with "tighter and more compact layouts". I have a custom component that does the job for me but the Overview shows "Div Form Row" instead of "Form Row elementID".

I know I could label my Form Rows to match the elementID, but then the Overview would not distinguish between the Form Rows and the hundreds of Divs in my design.

I don't think it would take much more than duplicating your code for Row; renaming the duplicate to Form Row; and changing the generated class from row to form-row.

TIA, Tony

Shift + Space inserts a   (thanks for bringing it up, @marrco!)

did you test it?

Open a new design, add just a <p> and "type[shift+space]something"

that adds a regular space, in the HTML preview pane and even in the published version, not a <&nbsp;> at least for me

Thanks for the fixes and the NBSP function! @Jo did you really test it?

It works when I test it. &nbsp; aren't visualized in the HTML view at the moment, but you can see them by viewing the source code of the page when previewing and exporting. As for other HTML entities, maybe the Character Input dialog will be a good place to put them (trigger it by clicking Char Input button on the text editing toolbar).

@tonybenedetti Thanks for the suggestions! Form rows are supported. When you drop our regular row component in a form, it adopts the form-row class.

wow, you're right, even if not shown in the HTML preview it works when exported. I guess I did something wrong yesterday!

thanks for adding this HTML entity

Thanks, @martin ... the form-row implementation does just what I need ... super!

Hey, Martin !

Many thanks for this new 4.4.2 version, which add toast, spinner and checkbox switch style. Just everything I needed. Thanks ! The non-breaking space is also a wonderful addition :-)