Building Mobile App with Bootstrap Studio and Capacitor

Tips and Tricks
1

I have been using Bootstrap Studio for sometime but never joined the forum. Anyway, this is just a basic proof-of-concept for myself. I used to build mobile apps with Cordova years ago. And I think you can build a good mobile UI rather quickly with Bootstrap 5 and Bootstrap Studio. So I did. And it turns out, people are moving over to Capacitor now instead of Cordova to package your mobile-web into a mobile app.

So here’s what I did – build the app UI and package it with Capacitor. It’s not a full complete app yet. That would need a lot more Javascript programming I think. But this is definitely doable.

Here’s a hosted version of the app UI. I kinda copied the UI of an e-wallet app that is widely used in Malaysia called Touch N Go, just for practice. I used a cards, icons, off canvas, etc.

Touch N Go (xmlot.com)

image
image1920×1080 165 KB

Getting the design to work with Capacitor is the challenge. I spent hours last night figuring that out. I ran issues with JDK version, NPM, Gradle, emulators, Ionic / Capacitor setup, etc… But once I got over that, building and running the UI in the emulator swift.

Anybody else is doing this? I mean building mobile apps with Bootstrap Studio. Care to share your process?

2 Likes
2

If I’m making a mobile app, I’m using React Native, but if you would like to mix Bootstrap Studio to build a mobile app please use Nativescript, capacitor and ionic are catastrophic to work with and with Nativescript you have support for several Frontend frameworks like angular, svrlte, vue, solid and many more. Its better to make pwa instead of using only capacitor tbh.

Conclusions:

  • If you wanna make a native app with more native look and avoid using BSS use React Native
  • If you wanna make an app with Bootstrap Studio Designs/Front use Nativescript
  • If you don’t really need too many functionalities inside your app then pwa eill be more than enough

Thats all :slight_smile:

1 Like
3

Nice app :slight_smile:

I am using Bootstrap Studio, Vue.js and Capacitor. My mobile application is basically just a frontend that connects to the API that I built in Laravel.

My API handles registration, login, receiving requests from the app and sending data back.
So far it works really well.

2 Likes