Using htmx with Bootstrap is mostly a seamless experience, but I’ve encountered a few places where a bit of extra effort is needed to smooth everything out. Since I could not find a concise description of the required fix, I’ve created this quick post to outline the issue and the remedy.

Bootstrap

Since I work mostly on business-to-business administrative web applications, I need to build many interfaces, yet a slick or custom styling is usually not the highest priority. We need a well rounded set of standard component that enables data presentation with clarity. So let’s just pretend we still live in the ’10s and use Bootstrap. A benefit is that all the scraping-trained AI’s are now all Bootstrap experts, meaning that stamping out entire dashboards is trivial.

If you’re on a website and you see a link, how do you figure out where that link will take you? Just hover over it right? Try to hovering this Totally Legitimate Link. If you dare, click it.

If you’ve clicked the link, welcome back! Refresh the page to have the link in it’s initial state again. Not everything is what it seems, and this is also very true when browsing the web.

This website was made using Hugo, following the quick start tutorial and iterating from there. So far its been a lot of fun, and gradually expanding website functionality has been a very natural process.

Content

I use Obsidian to create my content, allowing me to write using MarkDown. Using Obsidian Linter I can automatically insert YAML properties that Hugo will pick up as metadata. Using this setup there is a nice separation between site content and site functionality.