Mobile Apps: Routing with Bootstrap


Thanks to the App Connect Client Side Routing it’s possible to use routing for your mobile apps built with Bootstrap. Now you can define a single index.html file and load all your content pages inside it.

Project Set Up

We start with creating a new project. Open the Project Manager and select New Project:

We select Mobile - Bootstrap Blank:

Enter the project name, select the project folder and click Save:

You can see that an index.html file has been created and the View Component has been added on it. This is where all your content pages will load:

You can add any content on your main (index.html) page - such header, footer, navbar etc. content that is required for your app. In our example we add a header with a navbar:

Content Pages

Now let’s create a content page, which will be loaded in the main page.
Open the Pages Manager and add new page:

Add a name for your page:

Make sure the type is set to Content and that your Main Page is selected:

Click Save:

Your content page has been created. Also a route is automatically generated in the Routing Panel for each of the content pages you create.

You can add any content here:

We add some text content here:

Loading Content Pages

You can create as many content pages as you need. They will be loaded in the view component when their route is called.
We select a nav item in the navbar and select the route picker for the Link:

Then we pick our About page route and click Select:

And you are done. Now your content page will be loaded in the main page, when its route is called.