Thoughts on Mendix 5 & Bootstrap (Bootswatch collection)

I just downloaded the Bootswatch theme collection from the app store and I'm impressed by some of the things I see there. This shows what some already know - you can in fact create very good and 'current' looking Mendix applications, especially since Mendix 5. However... there's a but. And that is the ease with which to do so, compared to the relative ease of other parts of Mendix. While improved in Mx 5, I feel there is still some work that can be done. The Bootswatch collection is a case in point, in fact. Closer inspection reveals that almost all elements that are demonstrated on the home page contain custom classes and HTML snippets that apply classes and divs. To me, this is exactly the kind of thing I want to avoid in Mendix - after all, we're modeling, not coding. I want the application to look nice but I do not want to lose the benefits of rapid development by business minded people by having to design every form with precision and CSS knowledge. Some suggestions: The "Render mode" property of table cells is not being used to its full potential. Why not add the header classes (H1, H2, etc.) in here? Buttons have the "Button style" property, allowing you to select info, warning etc. As the Bootswatch collection shows, this can be applied to all sorts of elements, not only buttons. Mendix does not provide that option however. In fact, not even all buttons (i.e. datagrid control bar) can make use of this property. Why not expand this option across all elements? Slightly more advanced: if classes could be mentioned on elements in the actual form, and even preloaded there, it would give every developer clear insight into the effect that the different classes have on their form design. This would help a lot. Essentially: if all the options and capabilities displayed in the Bootswatch collection were to become "selectable items" in the Modeler, people would really start using them across the board. At the end of the day, not every Mendix developer is going to learn about the different classes by heart, but put them in a few drop-downs, and anyone can.
4 answers

Hi Querijn,

I am the one who developed the bootswatch module and it was always my intention to: A) Try to use standard components as much as possible B) Try to not alter the standard bootswatch/bootstrap css.

As you have pointed out I am using a lot of HTML snippets, the reason is that I wanted to conform as much as possible to the bootstrap styling. These are currently there as a temporary measure and are by all means not the best way to implement functionality. Mendix 5 does comply very nicely with bootstrap in a lot of ways, but extra classes and some HTML changes will get it even closer.

Whilst developing the app I have fed back a lot of my experiences to RnD and I have been assured that lots of the functionality I had to use in HTML snippets is being added to the platform. For instance i know that RnD have been working on having the option for you to select different heading types for labels. Once this feature is available I will of course update the app.

In regards to point 2 and 3 I agree this could definitely improve the functionality that is in Mendix.

Also I have started to use the font icons, especially on the mobile layouts for the toggle button. I do believe including this in the platform itself would be a major improvement though. I will feed this one back to the RND team.

I will continue to improve this module and any feedback/improvement suggestions would be very welcome.


How about the use of 'font-icons' which is highly 'effective' using bootstrap (FortAwesome)?

When you want your application to stand out and use icons, different from Mendix standard, you mostly end up with font-icons.

However when you put a class on a button to replace the icon, the caption gets affected too, which will mess up your styling.

Font icons make it easy to change color / size and in my opinion, just stand out more next to the standard Mendix icon set


Mendix 5.4.0 has been released which now gives the options of headers. I will upgrade the bootswatch module to make use of the header functionality. I will also include in the next version bootstrap glyphicons and their classes.


I just wrote a blog post about my experiences developing the bootswatch module if anyone is interested: