Building Single Page Applications on ASP.NET Core 2.1 with Angular 6 – Part 2: Upgrading Bootstrap

Posted on by

This is the second in a series of posts on building Single Page Applications with ASP.NET Core 2.1 and Angular 6. The previous post covered numerous getting started topics such as creating a new app and upgrading to Angular 6. This post outlines the steps required to upgrade to Bootstrap 4, including installing Font Awesome and ngx-bootstrap, as well as making the necessary changes to the SPA template.

 

Upgrading to Bootstrap 4

The Angular SPA template that ships with ASP.NET Core 2.1 includes Bootstrap. Bootstrap is a free and open-source front-end framework (library) for designing websites and web applications. Upgrading Bootstrap 4 is easy, just follow these steps.

  1. In a command prompt, switch to the ClientApp subdirectory: 
    cd ClientApp
  2. Install the Bootstrap package using npm: 
    npm install bootstrap@latest

No configuration changes are necessary.

 

Installing Font Awesome

An icon library is essential for designing websites and web applications. Bootstrap does not include an icon library by default, although they do provide many recommendations. Font Awesome is a popular choice, the latest version includes over 1000 free icons. Install Font Awesome by following these steps.

  1. In a command prompt, switch to the ClientApp subdirectory: 
    cd ClientApp
  2. Install the Font Awesome package using npm: 
    npm install font-awesome
  3. Open angular.json for editing and add Font Awesome to the list of styles: 
    "node_modules/font-awesome/css/font-awesome.css"

 

Installing ngx-bootstrap

Using Bootstrap in an Angular app is a whole lot easier with a tool such as ng-bootstrap or ngx-bootstrap. These packages provide a set of native Angular directives based on Bootstrap. No dependency on jQuery or Bootstrap’s JavaScript is required. Follow the steps below to install ngx-bootstrap now.

  1. In a command prompt, switch to the ClientApp subdirectory: 
    cd ClientApp
  2. Install the ngx-bootstrap package using npm: 
    npm install ngx-bootstrap

 

Updating the template

Now that everything is properly installed and configured, it’s time to update the SPA template to work properly with Bootstrap 4. Within the ClientApp subdirectory, follow these steps to make the necessary changes:

1. Update src\app\app.component.css as follows:

@media (max-width: 575px) {
  /* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
  .body-content {
    padding-top: 60px;
  }
}

2. Update src\app\nav-menu\nav-menu.component.css as follows:

li .fa {
  margin-right: 10px;
}

.flex-column {
  width: 100%;
}

.navbar {
  padding: 0;
}

.navbar-brand {
  padding: 15px;
}

.navbar-toggler {
  margin-right: 15px;
}

.nav-link {
  padding-left: 16px;
}

/* Highlighting rules for nav menu items */
li.link-active a,
li.link-active a:hover,
li.link-active a:focus {
  background-color: #4189C7;
  color: white;
}

/* Keep the nav menu independent of scrolling and on top of other items */
.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

@media (min-width: 576px) {
  /* On small screens, convert the nav menu to a vertical sidebar */
  .main-nav {
    height: 100%;
    width: calc(25% - 20px);
  }
  .navbar {
    border-radius: 0px;
    border-width: 0px;
    height: 100%;
    display: block;
  }
  .navbar-header {
    float: none;
  }
  .navbar-collapse {
    border-top: 1px solid #444;
    padding: 0px;
  }
  .navbar ul {
    float: none;
  }
  .navbar li {
    float: none;
    font-size: 15px;
    margin: 6px;
  }
  .navbar li a {
    padding: 10px 16px;
    border-radius: 4px;
  }
  .navbar a {
    /* If a menu item's text is too long, truncate it */
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

3. Update src\app\nav-menu\nav-menu.component.html as follows:

<div class='main-nav'>
  <div class='navbar navbar-dark bg-dark navbar-expand-sm'>
    <a class='navbar-brand' [routerLink]='["/"]'>Coding Flow</a>
    <button type='button' class='navbar-toggler' data-toggle='collapse' data-target='.navbar-collapse' (click)='toggle()'>
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class='navbar-collapse collapse' [ngClass]='{ "collapse": !isExpanded }'>
      <ul class='navbar-nav flex-column'>
        <li class="nav-item" [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'>
          <a class="nav-link" [routerLink]='["/"]' (click)='collapse()'>
            <span class='fa fa-home'></span> Home
          </a>
        </li>
        <li class="nav-item" [routerLinkActive]='["link-active"]'>
          <a class="nav-link" [routerLink]='["/counter"]' (click)='collapse()'>
            <span class='fa fa-graduation-cap'></span> Counter
          </a>
        </li>
        <li class="nav-item" [routerLinkActive]='["link-active"]'>
          <a class="nav-link" [routerLink]='["/fetch-data"]' (click)='collapse()'>
            <span class='fa fa-sun-o'></span> Fetch data
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

With those changes in place, the site should display as per the image below:

 

Source Code

If you ran into any issues, you might like to download a completed version of source code here; Coding Flow on GitHub. If that doesn’t help, please be sure to post a comment below.

 

Next steps

In this post, I have provided an overview of upgrading to Bootstrap 4, including installing Font Awesome and ngx-bootstrap, as well as making the necessary changes to the SPA template. If you would like to learn more about any of these technologies, take a look at the following resources:

In the next post I’ll show you how to implement Open API, and how using it will improve your productivity by reducing the amount of code and documentation you will need to create.

Thanks for reading, please feel free to post any questions or comments below.