Rapid prototyping of Angular-powered Bootstrap 5 apps without coding

Today I'm excited to announce the support for Bootstrap projects in JitBlox. If you're not familiar with JitBlox, it's an online environment that speeds up the design and prototyping of Angular applications. JitBlox lets you build working prototypes without coding, providing a jump-start for your next web project.

If you've read some of my earlier blog posts, you might know that adding Bootstrap support has been a wish for a while. Until now, JitBlox only allowed users to create apps that use Material Design components. As of today, you will find Bootstrap 5 as the second option when you create a new app.

Why Bootstrap?

Bootstrap has been one of the most popular CSS frameworks for some time now. It is designed for rapid prototyping and has a large collection of components out of the box. The Bootstrap project is actively maintained, which resulted in the recent release of Bootstrap 5 on May 5, 2021.

Bootstrap 5 is a major release that incorporates lots of improvements to its component library (such as a brand new Accordion component and updated form controls), improved customizing (more use of custom CSS properties), an icon library and the removal of jQuery.

Using Bootstrap with Angular

Integrating a CSS-only library such as Bootstrap into an Angular project can often be labor intensive without using a well-maintained widget library that takes care of the Angular-specific stuff. That's why JitBlox also integrates quality widgets from the popular ng-bootstrap project. This means that when you create a new Bootstrap app in JitBlox, you will find a mix of widgets, extensions and utilities that make building an Angular-powered Bootstrap application easier than ever.

Let's explore in more detail what this integration entails (or, if you wish, check out the Bootstrap 5 demo project now, no login required)!

ng-bootstrap widgets

To start with, you will find more than 20 easy-to-configure widgets from the ng-bootstrap project, including advanced widgets such as Datepicker, Carousel and Typeahead. All of these are configurable through easy-to-use property editors, avoiding mistakes and reducing the need to browse widget documentation.

Note: Bootstrap 5 support in ng-bootstrap is currently in Beta. Your projects will be automatically upgraded to newer ng-bootstrap versions that solve any issues found during this beta stage.

Native Bootstrap components

For good reasons, ng-bootstrap does not have an Angular counterpart for every Bootstrap component. For example, it doesn't offer a widget for simple Bootstrap-styled components like a Badge, Breadcrumb or Spinner. The good news is that we've also integrated about 40 of these native Bootstrap components into JitBlox, again with property editors that let your focus on the "what" instead of, say, searching the docs for spinner size class names or breadcrumb divider configuration. The same holds true for layout components like Grid and Table.

Bootstrap utilities

Bootstrap has lots of useful utilities that control aspects like spacing, borders and colors. Because utilities can be applied to almost any element, you won't find these in the designer's toolbox: instead, they are integrated into the property editor, organized into logical groups.

Bootstrap icons

Last but not least, we've integrated icons from the free, open-source Bootstrap Icons library that contains over 1,300 high-quality icons. You can add any Bootstrap icon to your template by simply dropping the Icon widget from the toolbox.

Check out the demo project

There is a demo project that demonstrates most of the Bootstrap and ng-bootstrap widgets, check it out here. Feel free to save a copy of the project, copy parts of it to your own or check out the generated source code to get an idea of out much time you can save.

Tip: you can open your own project in another browser tab and copy-paste between different projects even if they are in a different tab.

Other new features

In addition to Bootstrap 5 support, we've also added a handful of other interesting features since version 0.23:

• JSON editing: the mock data editor has been enhanced with support for raw JSON editing. This is useful if you want to easily move or copy data between different mock data sets, or between mock data sets and component properties (see the related GitHub issue).
• Copy/paste between projects: as already mentioned above, you can now copy elements between projects that are in a different browser tab.
• IfNot condition: when you have an If node in your template, you can now easily invert it to create an IfNot node.
• New event handlers: quickly add a prevent default or stop propagation event handler to an element with a single click.

What's next?

The demo project might be a bit overwhelming. That's why we are also working on more, smaller examples (keep an eye on the examples page). In addition to that, we are investigating the possibility for wizards/snippets that make it even easier to quickly initialize more complex and composite components, such as an Accordion or Nav.

I'm looking forward to hearing your opinions and suggestions (you might also want to check out our roadmap, which is updated regularly).