Check out the example of a multi-layout Angular application templates complemented with Bootstrap styles.
What we are going to build
Our application provides two separate layouts – one served on a landing page view, the other used on a dashboard view. We will create a horizontal navigation and a footer for the landing page and a vertical navigation for a dashboard.
All views will be complemented with Bootstrap classes.
The finished project is available in the following GitHub repository: little-pinecone/angular-multi-layout-scaffolding.
|I try to keep the project up to date. Visit the releases list to keep track of the current versions of frameworks and libraries used.|
- We will work on an Angular 6 project that uses the
scsspreprocessor and Bootstrap styles. To learn how to create such a project, visit the How to create a new Angular project post.
- The project requires the multiple layout feature applied – check out the Apply multiple layout to an Angular app post before you start working with this tutorial.
Add html and scss to components
Center the content of all pages
To center the content of all pages, update the
body heights to 100%:
Adjust the guest view
Style the guest layout by adding the
wrapper class to it:
Add the top navigation to the
Create a footer by editing the
Fill the content of the landing page with the follwing example view:
With Bootstrap included into your project, the landing page should look like this:
The work done in this section is contained in the commit 5e2b80b4f3f7a2fba42e3d49542aa8b71f3d5a5e.
Adjust the view for an authorised user
Style the authorised layout by adding the
wrapper class to it:
full-width class has been already defined in the
Add styles to the component:
Adjust styles of the dashboard page:
The content of the dashboard page should look like this:
The work done in this section is contained in the commit 4b51190ea37246cfdb009b24569ad7060660ea64.
The new html content should be accounted for in the tests. Copy the example tests from the following snippets:
Run the following command:and check out the output:
The work done in this section is contained in the commit 431b9cdd6ddd7da9e5185fc3114b4c7bd1157d08.