Discuss

Mobile Apps: Routing with Bootstrap

On this page

Intro

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:

Screenshot_1|690x430

We select Mobile - Bootstrap Blank:

Screenshot_2|690x430

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

Screenshot_3|690x430

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:

Screenshot_4|690x431

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:

Screenshot_6|690x431

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:

Screenshot_7|690x431

Add a name for your page:

Screenshot_8|690x431

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

Screenshot_9|690x431

Click Save:

Screenshot_10|690x431

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:

Screenshot_11|690x431

We add some text content here:

Screenshot_12|690x431

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:

Screenshot_13|690x431

Then we pick our About page route and click Select:

Screenshot_14|690x431

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